Let's say you have two simple pages
search.html
which, when you type in some text into "namesearch" and click "search" will POST to the page
results.php
<?php
$name = $_POST["name"];
$con = mysql_connect("localhost","root","");
if (!$con){ die('Could not connect: ' . mysql_error());}
mysql_select_db("friendface", $con);
$result = mysql_query("SELECT * FROM users where name like" . " '%" . $name . "%'");
//output the results to an unordered list
echo "
- ";
- ".$row['name']." ";
while($row = mysql_fetch_array($result)) {
echo "
}
echo "
mysql_close($con);
?>
so, when you type something into the search field
and click submit you see a list
Now, if you want to have the results show up below the search bar, just drop in a reference to jQuery in the header.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
Now, let's fire a function in the "onkeyup" event from the search box:
which will call a javascript funtion "suggest" and pass it the value of the textbox. Now, we have to let the page know what that function should do. What we want it to do is to call the results page, get the results, and display them on the page. All using Ajax.
So, let's make a <div> area for the results to be displayed. place the following after the button
which gives the page a div to drop some results into, and back up in the header, let's make out js function.
so by this point, your whole page should look like this
search.html
Now, when you type int he text box you should get the results showing up just below the search field.
Of course, it would be nice to pretty it up a bit. Add a line in the head section
<link type="text/css" href="style.css" rel="stylesheet" />
create a new file
style.css
#namesearch{
padding:3px;
border:1px #CCC solid;
font-size:17px;
}
#suggestionList {
margin: 0px;
padding: 0px;
height:20px;
width: 200px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
}
#suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
#suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
background-color:#000;
color:#FFF;
padding:0;
margin:0;
}
and reload your page. Lovely.
