If your a web developer looking to add some extra functionality to your clients website and look good while your at it, then than an auto suggest search bar is something you might consider. Ever since ‘Google Suggest‘ rolled out the labs, hundreds of clones have sprung up on a variety of websites, each with a slight twist on the original. This article is going to show you how to make your own ‘auto suggest’ search bar in three easy steps.
This article assumes you have a solid grounding in HTML, CSS, Javascript and PHP. It is showing technique, not teaching you the language.
Step 1 – Good Form
The first step towards making our finished product is to develop the front-end of the site. This is basically going to consist of a HTML form containing an text input dialog, a submit button and a placeholder for our suggestions. With that in mind, lets look at the code:
<html>
<head><title>Auto Suggest</title></head>
<body>
<form action="#" ><input type="text" id="inputtext" />
<input type="submit" name="submit" value="Search" />
<div id="suggestions"> </div>
</form>
</body>
</html>
As you can see we have our text box labeled ‘inputtext‘ <input type=”text” id=”inputtext” /> and our placeholder labeled ’suggestions’ <div id=”suggestions”> </div>. When we come to write the Javascript we can use these id’s to access them. That’s all that’s needed for now, so lets move on to step 2.
Step 2 – Script Me
Right now our page is static and ultimately useless. However, with a little Javascript magic it will start to come alive. Before we right the code, lets take a step back and think about what we need to do. Every time a letter is entered into our form we want to send a HTTP request to the server and check if the string in the form matches any of the results from a preset list. If it does we want to write the results to our web page. So the first thing we need check if a letter has been entered into our text box. To do this we can use the onkeyup attribute to call a Javascript method every time a new letter is entered. So our HTML now looks like this:
<form action="#" > <input type="text" id="inputtext" onkeyup="suggest(this.value)" /> <input type="submit" name="submit" value="Search" /> <div id="suggestions"> </div> </form>
So now, every time a letter is entered the Javascript function ‘suggest‘ is called, passing the value in the text box as a parameter. That’s all well and good, but the suggest function doesn’t exist yet, so lets create it.
var xmlHttp;
function suggest(input) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
var url="suggest.php";
url=url+"?query="+input;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("suggestions").innerHTML=xmlHttp.responseText ;
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Don’t be scared! Although it looks a lot it is in fact very simple. the GetXmlHttpObject() is our standard function to create an XMLHTTPRequest object that works across all browsers and the stateChanged() function simply receives text from the server and places it in our ‘suggestions‘ placeholder. The suggest function itself is also very simple to understand. Basically, it creates a new XMLHttpRequest object and stores in the variable xmlHttp. After some basic error checking, we tell our application to run the stateChanged() function when there is a change of state. The URL is then created from the text inputted in our text box and the HTTP request is opened and sent with this URL. Now we have all the client side code completed and functioning, the last thing we need to do is write our PHP file.
Step 3 – Server Side
All we need the server to do is check to see whether the query sent matches anything stored in a file, database or anything we want. In this example we are going to just fill an array with countries from around the world and then see if the query matches them. We can do this as follows:
<?php
$countries[] = "Afghanistan";
$countries[] = "Albania";
$countries[] = "Algeria";
$countries[] = "Azerbaijan";
$countries[] = "Bahrain";
$countries[] = "Barbados ";
$countries[] = "Belgium";
$countries[] = "Canada ";
$countries[] = "Chile";
$countries[] = "China";
$countries[] = "Egypt";
$countries[] = "Germany";
$countries[] = "India";
$countries[] = "Iraq";
$countries[] = "Ireland";
$countries[] = "Mexico";
$countries[] = "Pakistan";
$countries[] = "Poland";
$countries[] = "Sri Lanka";
$countries[] = "Sudan";
$countries[] = "Thailand";
$countries[] = "United Kingdom";
$countries[] = "United States of America";
$countries[] = "Zimbabwe";
$query=$_GET["query"];
if (strlen($query) > 0) {
$suggestions="";
for($i=0; $i<count($countries); $i++) {
if (strtolower($query)==strtolower(substr($countries[$i],0,strlen($query)))) {
if ($suggestions=="")
$suggestions=$countries[$i];
} else {
$suggestions=$suggestions.", ".$countries[$i];
}
}
}
}
echo $suggestions;
?>
All this does is populates an array with a variety of countries (of course, in a real world application this would be populated from a database or text file) then gets the query that was passed to it. The code following this simply checks to see whether the query passed matches anything in the array and adds it to the ‘suggestions‘ string. At the end of the script the suggestions are outputted and received by the Javascript.
Finished… nearly
So now we have a fully functioning auto-suggest feature. Right now it looks a little bland but with a little CSS and imagination we can create something that really looks the part. By slight modifying the code and adding some styling I came up with this example. Give it a try yourself and post your results in the comments, we would love to see them!