jQuery autocomplete

Autocompletion of web-based forms has become so common that it has reached the point of being an expectation. Fortunately (again), there is a jQuery solution that makes this a simple addition to any form.

The first step is to download the jQuery Autocomplete plugin and check out the documentation. Make sure that you include the script and the CSS file, then build your form as normal and add a single call to the autocomplete plugin.

<form>
  <fieldset>
    <label>Type in your favorite color: <input type="text" id="color_input" /></label>
  </fieldset>
</form>
<script type="text/javascript">
  jQuery('#color_input').autocomplete(['black', 'white', 'red', 'green', 'blue', 'yellow', 'purple', 'brown', 'silver', 'magenta', 'cyan', 'gold', 'goldenrod']);
</script>

As you can see, the example above uses a simple Javascript array as the input to the autocomplete method. This implies a local, static list of lookup items. Here is the example:

Now, if you want to make things really interesting, take the above idea and tie it together with an Ajax lookup. That way, the suggested items can be any list that pertains to the specific user and action related to the input. For example, the input box may be a list of counties for a specific state in the US. It may be a list of friends from a social network. It may be a book title or author from Amazon.

The basic code for an Ajax-based lookup is the same, but the parameter to the autocomplete function is a string URL instead of an array of items.

<form>
  <fieldset>
    <label>Type in your favorite color: <input type="text" id="color_input" /></label>
  </fieldset>
</form>
<script type="text/javascript">
  jQuery('#color_input').autocomplete('/relative/path/to/script');
</script>

The path to the script file can be either a relative or absolute URL. When the autocomplete function calls your custom script, it passes two parameters, q and limit. The q parameter is the value that the end-user has typed into the box and the limit is the number of items to return. See the jQuery autocomplete documentation for more details.

For this example, I have written a very simple PHP script that shows how this might work on a typical web site. In the example, I use the Geonames service to lookup place names based on what is being typed. The PHP script looks like this:

  include_once('custom_functions.php');
  $query = array_key_exists('q', $_GET) ? $_GET['q'] : '';
 
  $url = 'http://ws.geonames.org/search?q=' . $query . '&maxRows=10&type=json';
  $result = Helpers::remoteLoad($url, 10, 3, 3, 1, 'geoname-' . md5($url), 20);
  $result = json_decode($result);
 
  $output_items = array();
  foreach ($result->geonames as $item) {
    $output_items[] = $item->name;
  }
 
  print(implode("\n", $output_items));

I haven’t included the full include file source, but obviously there is a class which does remote URL loading. This portion is not important to the example. The relevant information is that the script looks up a list of place names by calling out to the remote service and then prints a carriage-return delimited list of names.

The autocomplete plug-in takes care of all the rest. Here is the resulting form. For example, type in London or New York to see how it works:

There are many other options to the autocomplete plugin that you should explore on the documentation page, however you can see how quickly and simply a basic autocomplete field can be created using the defaults.

If you enjoyed this article, please share it using Facebook Connect or AddThis and subscribe via rss.

Tagged as: Ajax, Javascript, jQuery, PHP

Comments: