February 27, 2021
Hot Topics:

Fun with Auto-Complete Widgets

  • By Vlad Kofman
  • Send Email »
  • More Articles »

Among all the improvements to the web usability—brought about by the proliferation of Web 2.0 effects and widgets—the auto-complete widget (or combo-box) is one of the most useful ones. The auto-complete feature originally appeared in desktop applications, and became well known with the advent of the Internet Explorer (IE) browser.

In IE, the auto-complete is used to display a list of previously visited sites when the user begins to type the URL in the address bar. This saves the user from typing the whole URL again, if it has already been visited. On the web, however, auto-complete widgets provide even more benefits for the user, because they can suggest entries that other users have entered, or entries most relevant for the task the users is trying to achieve.

Figure 1: Internet Explorer auto-complete feature in the address bar

In this article, I will discuss technology behind auto-complete widget and compare three different implementations (using three different JavaScript libraries) of this feature. In particular, I will look at Dojo, Scriptaculous, and Yahoo User Interface (YUI) libraries. None of the implementations require a lot of effort on the client side because the logic is taken care of by the libraries. In addition, on the server side you can use any technology to return the suggestions.

Auto-Complete Combo-Box

The auto-complete widget became widespread on the web due to the development of AJAX toolkits and the support of AJAX technology in the modern web browsers. I will discuss three specific implementations of Auto-complete. However, for greater detail on the AJAX toolkits, please refer to my previous article "The Twelve Days of Ajax." AJAX, which stands for Asynchronous JavaScript and XML, allows client browser to sent requests to the server in the background and without refreshing the whole page content.

So how does this widget work? And what is the benefit to the user?

The most obvious benefits are reduction of typing that the user needs to do and elimination of error in the typed-in text. Another advantage is that, when the user doesn't know what is enter, auto-complete will suggest all possible options. The last benefit is that, even if the user is aware of what the choices are, he or she does not have to remember them.

The auto-complete combo-box usually opens a dialog as the user starts to type, with possible suggestions; these suggestions come from the server asynchronously via AJAX APIs. On the web, this widget can have many useful behaviors based on the particular page requirements. For example, it can provide suggestions for search queries, airport names, states, hotel names, area codes, and so forth. This widget can be used almost anywhere where there is a list of possible choices.

A lot of sites (and particularly Web 2.0 sites) embraced this feature because it creates a very rich user experience. In the case of case of search text fields, this feature can leverage the client-server nature of the web, and provide suggestions that yield relevant results for other users or most popular queries.

Figure 2 shows a screen shot of the widget that auto-suggest possible airport names and codes. Note the list appears after typing only a few letters.

Figure 2: Auto-complete airports list on kayak.com

Google was one of the first companies to use this feature with the search queries, and Google Labs had the auto-complete feature for a very long time, but for some reason it never left their labs. However, Yahoo recently incorporated a feature called Search Assistant across all of their main web properties. The Search Assistant makes it more intuitive by suggesting similar or related keywords.

Click here for a larger image.

Figure 3: Google suggest

Page 1 of 4

This article was originally published on January 3, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date