Adding Autocomplete To Your Searches

Autocomplete is a feature that’s been around for a while. We’ve seen this in sites like Amazon, Google and YouTube – try entering the letters ‘st’ in Amazon’s search field, and you’ll get a list of suggestions including Star Wars, Steve Jobs, Star Trek, etc. It’s a pretty cool addition to a search page, and it turns out that it’s not terribly difficult to do – there are prebuilt Javascript libraries that allow you to do it. I mentioned JQuery in a previous post, so that’s what I’ll use to demonstrate.

Lets assume you’ve got a simple HTML page containing an input field with an id of ‘search’ that you want to add autocompete functionality to. In the header of your page, you’d add the following code:

$(function() {
$( “#search” ).autocomplete({
source: “name_search.php”
});
});

In this code, we are calling the JQuery UI function autocomplete on the ‘search’ input field on the webpage. In the function, we are specifying an option called ‘source’ – this is required; it is specifying the list of items that are available for your autocomplete. There are a couple of ways that you can specify this :

• a Javascript Array with local data
• a String, specifying a URL
• a Javascript function that creates the list

In the example above, I’ve created a simple PHP page that queries a MySQL database to get the list of names; the autocomplete function will pass the user’s input to the page as a get variable called term, so the query to the database would look something like this:

$query = “select id, name from names where name like ‘”. $_GET['term'] . “%’”;

That’s just a basic example, there are additional options that you can use to customize things; for more details you can look at the JQuery UI documentation here.