You see it in Yahoo, Google, Bing, and all over the web. As you type into a search feild a box appears before your eyes showing you suggestions based on what you are typing. This offers more than just ease of use for your visitors, it allows them to see other content related to their search that they may have been otherwise unaware of. There are many tutorials on this subject, many of which rely heavily on API’s or copyright protected files.
Developing an auto suggest form is rather simple, with the right methods you too can churn out a professional looking auto suggest form without the complicated mess that many others provide. Visitors are likely to return to your site (provided the content is valid) to use features like this because so many other sites are slow in developing this type of technology.
The concept is simple, we run a JavaScript function every time a user presses a key in a search box, we use Ajax to send and receive data to a php search function and return the results to our page.
Creating the Form
All we need for this example is a text input, you will need to add a submit or other control if you desire it. We will also need to create a DIV which will display our results. The text input will use the onkeypress event to trap the users input and pass it through to our functions.
Input Area Setup + CSS
Our text input calls the functions “search” which will take the input from the field and use some Ajax to return the results into our DIV “searchresults”. As with Ajax we need to set up our XMLHttpRequest which acts as the communicator between our webpage and whatever we link to it.
Ajax XMLHttpRequest
function createXMLHttpRequest() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
return false;
}
// ]]></script>
Setting up the Search Function
So now that the form is created and we have our XML function set up for our Ajax request we can create our search function in JavaScript which will post the data from the form to our search php script.
JavaScript Search Function
function search(){
var userInput = 'search='+document.getElementById('search').value;
var xmlReq = createXMLHttpRequest();
xmlReq.open("POST","search.php", true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.onreadystatechange = function() {
if(xmlReq.readyState == 4 && xmlReq.status == 200) {
document.getElementById('searchresults').innerHTML = xmlReq.responseText;
document.getElementById('searchresults').style.display = "block";
}
}
xmlReq.send(userInput);
}
// ]]></script>
The code above creates a new XMLHttpRequest object and sends the input from the text box to our search php file by posting the data. Once the function receives a response from the search php file it will display the results within the DIV searchresults on our page.
Let’s write a basic search php file, we will use the LIKE statement in our sql statement.
Creating search.php
$user = "username";
$pass = "password";
$database = "my_database";
$c = mysql_connect($host, $user, $pass) or die(mysql_error());
mysql_select_db($database, $c);
$search = $_POST[‘search’];
$result = mysql_query("Select * from images where NAME like ‘$search%’ LIMIT 5");
while($i = mysql_fetch_assoc($result)){
extract($i);
echo "<strong>Name: </strong>$NAME
<hr />"
;}
mysql_close($c);
?>
The php code above runs a query on a table called “images”, you will need to change this to match whatever table you want to run the query on. We also use a LIMIT of 5 because we do not want to load the users page with every result, especially if it is a large database. Once we get our result we simply echo them out and our “search()” function receives the result to update our page.
Currently there will be no interaction on the results that we echo out, you could easily modify them to include a link to the page where the result would be relevant.
Taking it Further
To make your auto suggest forms look and feel more professional it would be a good idea to add some nice styling to your results, you can even include images. Changing the DIV styles around so that if floats on top of the page will make it so that the results do not push content on your main page out of the way.
Error handling and requiring a minimum number of characters before the search function is run is also a good idea. There are many avenues you can take to improve this form and function, if you develop it further and want to show off what you have done with it then leave us a comment below.
![[del.icio.us]](http://scriptperfect.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://scriptperfect.com/wp-content/plugins/bookmarkify/digg.png)
![[dzone]](http://scriptperfect.com/wp-content/plugins/bookmarkify/dzone.png)
![[Facebook]](http://scriptperfect.com/wp-content/plugins/bookmarkify/facebook.png)
![[Furl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/furl.png)
![[Google]](http://scriptperfect.com/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://scriptperfect.com/wp-content/plugins/bookmarkify/linkedin.png)
![[MySpace]](http://scriptperfect.com/wp-content/plugins/bookmarkify/myspace.png)
![[Newsvine]](http://scriptperfect.com/wp-content/plugins/bookmarkify/newsvine.png)
![[Propeller]](http://scriptperfect.com/wp-content/plugins/bookmarkify/propeller.png)
![[Reddit]](http://scriptperfect.com/wp-content/plugins/bookmarkify/reddit.png)
![[Slashdot]](http://scriptperfect.com/wp-content/plugins/bookmarkify/slashdot.png)
![[Spurl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/spurl.png)
![[StumbleUpon]](http://scriptperfect.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://scriptperfect.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://scriptperfect.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://scriptperfect.com/wp-content/plugins/bookmarkify/email.png)
reverse cell phone number lookup…
Just what I was searching for, thanks for posting ….
Its hard to find good help…
I am forever proclaiming that its difficult to find quality help, but here is…
reverse look up cell phone…
I like this web blog very much so much great info ….
Great website…
[...]we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[...]……
Related……
[...]just beneath, are numerous totally not related sites to ours, however, they are surely worth going over[...]……
More info…
[..] More info here [..]…
Great Websites…
[...]here are some links to websites that we link to because we think they are worth taking a look at[...]……
Visitor recommendations…
[...]one of our visitors recently recommended the following website[...]……
Blogs ou should be reading…
[...]Here is a Great Blog You Might Find Interesting that we Encourage You[...]……
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
Read was interesting, stay in touch……
[...]please visit the sites we follow, including this one, as it represents our picks from the web[...]……
Great website…
[...]we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[...]……
Links…
[...]Sites of interest we have a link to[...]……
Cool sites…
[...]we came across a cool site that you might enjoy. Take a look if you want[...]……
Thank you…
I was very pleased to find this web-site.I wanted to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post….
Sites You Should Check Out…
http://www.e-psychic-readings.com/horoscope-yahoo...
Websites we think you should visit…
[...]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[...]……
Great information…
This is certainly impressive. Among stare upon this realisation ingredients therefore we are taken aback. We are most certainly fascinated by this kind of tips. Folk appreciate your quotation, and benefits the effort while in this. Please keep adding i…
Sources…
[...]check below, are some totally unrelated websites to ours, however, they are most trustworthy sources that we use[...]……
Websites worth visiting…
[...]here are some links to sites that we link to because we think they are worth visiting[...]……
Gems form the internet…
[...]very few websites that happen to be detailed below, from our point of view are undoubtedly well worth checking out[...]……
Blogs ou should be reading…
[...]Here is a Great Blog You Might Find Interesting that we Encourage You[...]……
Great…
[...]here are some hyperlinks to internet sites that we link to since we believe they may be really worth visiting[...]…
You should check this out…
[...] Wonderful story, reckoned we could combine a few unrelated data, nevertheless really worth taking a look, whoa did one learn about Mid East has got more problerms as well [...]……
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
Thumbs up…
I saw this really good post today….
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
Great website…
[...]we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[...]……
Informative and precise…
Its difficult to find informative and accurate info but here I noted…
reverse cell phone lookup…
I like this blog its a master peace ! Glad I observed this on google ….
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
mite…
[...]This problem does not need medications or doctor’s consultation. It can be cure d with home remedies[...]…
………..
My spouse and i suppose in the meantime i’ll settle for book-marking as well as adding the Feed to my own Google consideration. My partner and i look forward to brand new revisions and may share this site with my personal Facebook class….
mend…
[...]Apart from that, another popular heartburn home remedy is to drink plenty of water after you have had your meal so that it helps the digestion[...]…
Awesome webpage…
[...] Now each time an individual looks at the existing fashion assertion, it is normally measurement zero [...]…
Why don’t others write as good as you?…
[...]If only all the websites at the top ten could possibly write such as you here. You ought to get a lot of merits due to this. Thumbs[...]……
Websites you should visit…
[...]below you’ll find the link to some sites that we think you should visit[...]……
Related.. Trackback…
[...]the time to read or visit the content or sites we have linked to below the[...]…
darmowy seks…
Glebokie cipy do podgladania bezlatnie….
Extra Reading…
[...]we like to honor other sites on the web, even if they aren’t related to us, by linking to them. Below are some sites worth checking out[...]…
Online Article……
[...]The information mentioned in the article are some of the best available [...]……
Cool sites…
[...]we came across a cool site that you might enjoy. Take a look if you want[...]……
Sites we Like……
[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
Sites we Like……
[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
… [Trackback]…
How do you do? our family loves your nice editorial thanks and pls keep it on…
Cool sites…
[...]we came across a cool site that you might enjoy. Take a look if you want[...]……
important links…
Guys check out these important links…
Websites worth visiting…
[...]here are some links to sites that we link to because we think they are worth visiting[...]……
Related……
[...]just beneath, are numerous totally not related sites to ours, however, they are surely worth going over[...]……
Tumblr article…
I saw a writer writing about this on Tumblr and it linked to…