I am using the below code which points to the search page of my site. However, I'd like to make it so when clicked, it opens a hidden drop down input box with a "Search" button. Then when someone types a search query and clicks the button, it forwards this to the search page of my site and does the search. I have no idea how to implement this as I'm a Javascript/PHP noob, but it seems like a cool mod for my site. If anyone needs more code snippets, please let me know. Thanks!
<a class="button_link_main" href="./search.php"><img src="/images/search.png" onmouseover="this.src='/images/searchsite_hover.png'" onmouseout="this.src='/images/search.png'" /></a>
Simply add a form with an input field and submit buttons in front of the link and give the <form> and <a> elements ids (here: searchForm and searchLink):
<form id="searchForm" action="./search.php" method="post">
<input type="text" name="q" value="">
<input type="submit" value="Search">
<input type="submit" value="Cancel" onclick="showSearchLink();return false;">
</form>
<a id="searchLink" class="button_link_main" href="./search.php" onclick="showSearchForm();return false;">Link</a>
Add this CSS code. It hides the complete <form> element on default:
#searchForm {
display:none;
}
Lastly, add the following JavaScript functions in your <head>. (You could use an external file for example.)
function showSearchForm() {
// show the form by setting style="display:inline"
document.getElementById('searchForm').style.display = 'inline';
// hide the link by setting style="display:none"
document.getElementById('searchLink').style.display = 'none';
}
function showSearchLink() {
// hide the form
document.getElementById('searchForm').style.display = 'none';
// show the link
document.getElementById('searchLink').style.display = 'inline';
}
If a user clicks the Link, the onclick event calls the showSearchForm() function. The second command "return false;" prevents the browser from loading the ./search.php site directly. (This is useful if someone has JavaScript disabeld: he will be redirected directly to the ./search.php site.)
The onclick event of the cancel button does exactly the same. It calls the showSearchLink() function and then prevents the form from being submit.
You can test all the code here: http://jsfiddle.net/tKMt4/
If someone submits the form by clicking the search button, he will be redirected to ./search.php. You can receive and echo the input data in your PHP-Code with:
<?php
echo $_POST['q'];
?>
For tips on how to implement the search functionality itself, you should search for a good tutorial. The best thing would probably be to store your websites text content in a MySQL database.