So, What Is an Autocompleter Anyway?
If you don't know what an autocompleter is, I suggest you go to the WeeFly Home Page
to see it in action. WeeFly is an innovative low-cost flight and hotel search engine. Its very first page contains two text boxes, one for departure airports and one for arrival airports. Type at least three characters of an airport name into the departure airports field. You should see a dropdown list of airport names that contain those characters. Figure 1
shows this scenario using "MIL" as a search string.
|Figure 1. WeeFly Autocompleter for the Departure Airport: Type at least three characters ("MIL") of an airport name into the departure airports field and see a list of matches.|
By the end of this article, you'll be able to build such an autocompleter too.
As you may have noticed, an autocompleter is formed by a text box and a hidden <div>, which is shown as soon as the user types some characters into the text box. Of course, before displaying the <div>, the autocompleter must provide a list of items that match the user request. But how are these items retrieved? Basically it uses one of two retrieval options depending on where the items reside:
- If they reside on the server, the autocompleter retrieves them using Ajax.
Let's walk through both options.
Using Ajax-based Autocompleter
This type of autocompleter works as follows: the user types a given number of characters and an asynchronous request starts in order to retrieve data that matches the string typed by the user. Of course, you're free to use JSP, Servlet, ASP.NET, or whichever language/technology you feel comfortable with to write the server side. For this article, however, I use PHP.
From the Script.aculo.us point of view, you can create an Ajax-based autocompleter using the Ajax.Autocompleter class. Here is an example:
The parameters you pass to the constructor are:
- The name of the text box where the user types the characters
- The ID of the <div> that has to be filled with the list of items
- The URL of the server-side component to which the request must be sent
- An optional literal object, which indicates the available options for customizing the autocompleter (more on this later)
Don't worry if this is not completely clear. The following example will explain how the whole thing works. Suppose you want to build an autocompleter for a list of countries. Listing 1 shows the code you need to accomplish this task.
You can find the Listing 1 code in the ajax-autocomplete.htm file. The CSS section gives the <div> a similar look to WeeFly. (Getting into the details of the CSS code is out of the scope of this article.)
The <body> section is very short. It contains a label, a text box, and a <div> that will be filled with the matching items. The core function is buildAutcompleter, which is called when the window is loaded (thanks to the Event.observe method provided by the Prototype framework). As you can see, buildAutocompleter creates an Ajax-based autocompleter and attaches to it the text box, the <div>, and the component to call in order to retrieve the data. Ajax.Autocompleter expects a server response with the following format:
As you can see, the server response is a simple HTML unordered list. As a matter of fact, Listing 2 contains the code for countries-list.php, a file included in the downloadable code for this article.
|Figure 2. Ajax-based Autocompleter for the Countries: Here is a screen rendering of the countries-list.php PHP script.|
The above PHP script retrieves the string typed by the user and builds an unordered list of the countries that match the user request. Note that the country list is hard-coded within the countries.inc.php file. In a real-world application, this list would be stored in a database, XML file, or some other more flexible data store. Figure 2 shows a screen rendering of the above PHP script.
OK, that's all well and good, but what if your server response is XML or JSON instead of a simple HTML unordered list? Don't worry; by the end of this article you'll know how to develop an autocompleterbased on the one provided by Script.aculo.usthat lets you handle any type of response. For now, let's examine how you can further customize your autocompleter.