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.
Figure 3: Google suggest
Unlike Yahoo, Google only shows the number of results and does not show similar or related keywords—called “concepts.” Yahoo also shows text queries where the keyword is in the middle or the end. For example, a search for “java” also suggests “free java download.”
Figure 4: Yahoo search assist
To implement this widget on your site, you can write all the logic from scratch or use one of the available AJAX widgets. I will look at widgets from Dojo, Scriptaculous, and Yahoo User Interface (YUI) libraries. They are all conceptually similar. They all send a asynchronous request to the server as soon as the user starts to type. As the response is received, they open a dialog on the client side, and populate it with suggestions from the server. Because this technology is server-side agnostic, you can use any application server on the back end.
Implementation in Dojo
To add a Dojo auto-complete combo box, you need to import main Dojo libraries (either on the page or in the main header if it is reused throughout the site).
You also need to declare dojo.widget.ComboBox and put the <select> tag with dojo parameters where you want the auto-complete text-field to appear.
Note: The select actually will be dynamically modified by the Dojo toolkit.
Also, note that one of the parameters, called dataUrl, needs to point to the server URL that will return suggestions.
...
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.ComboBox");
</script>
</head>
<body>
<select dojoType="ComboBox" value=""
dataUrl="/tests/widget/comboBoxData.js"
style="width: 200px;"
name="auto_complete" maxListLength="15">
</select>
That is really all that you need to do to incorporate Dojo based auto-complete on the client side. Again, the server implementation could use any technology.
Figure 5 shows the result of typing just the letter “a” in the US state’s auto suggest field.
Figure 5: Dojo Auto-complete demo
Please see the included source code for the full demo.
Implementation in the Scriptaculous Toolkit
Scriptaculous libraries are very similar in setup as those in Dojo, but require a little more code, and a specific response text format.
You need to define specific style for the div element.
<style>
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:20px;
cursor:pointer;
}
</style>
You also need to import Scriptaculous JavaScript files on either the page where this feature should become visible or in the main header, if it is reused throughout the site.
</head>
<script language="JavaScript"
type="text/javascript"
src="js/ext/s17/prototype.js"></script>
<script language="JavaScript"
type="text/javascript"
src="js/ext/s17/scriptaculous.js?load=effects,dragdrop,
controls"></script>
On the page where you want auto-complete to appear instead of a <select> tag that Dojo uses, you need to use two tags, <input type=”text”> and a hidden <div>.
<input name="query" id="query" type="text" size="50"
maxlength="100" class="content" value="">
<div id="auto_complete" class="autocomplete"></div>
You also need to put in a little JavaScript code to tie the two together and tell Scriptaculous which input field you what to have Ajax properties, with the new Ajax.Autocompleter object. This object has three main parameters: The first parameter is the INPUT field id, the second is the DIV id, and the third is the URL, which should return dynamic suggestions. This object also has optional parameters, such as the minimum number of characters required for the query be auto submitted to the server.
<script>
// basic implementaion
//new Ajax.Autocompleter("query", "auto_complete",
"autocomplete.php", {});
// implementaion with parameters
new Ajax.Autocompleter("query", "auto_complete",
"autocomplete.php", {paramName:
"query_auto_complete", minChars: 2});
</script>
The server side must return its response in a specific format, such as:
<ul> <li>guestrooms</li> <li>guppy</li> </ul>
And the UI can look what’s shown in Figure 6.
Figure 6: Scriptaculous Auto-complete demo
Please see the included source code for the full demo.
Implementation in the Yahoo User Interface (YUI) Library
YUI is similar in implementation to Scriptaculous. It also needs to have a style defined.
<style type="text/css">
#statesautocomplete,
#statesautocomplete2 {
width:15em;
padding-bottom:2em;
}
#statesautocomplete {
z-index:9000; }
#statesinput,
#statesinput2 {
_position:absolute; /* abs pos needed for IE quirks */
}
YUI requires import of the main YUI JavaScript files on the page where you want this widget or on the main header.
<script type="text/javascript"
src="yui_auto_complete_demo.js"></script>
<link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts-min.css?_yuiversion=2.4.1" />
<link rel="stylesheet"
type="text/css" href="../../build/autocomplete/assets/skins/
sam/autocomplete.css?_yuiversion=2.4.1" />
<script type="text/javascript"
src="../../build/yahoo-dom-event/
yahoo-dom-event.js?_yuiversion=2.4.1"></script>
<script type="text/javascript"
src="../../build/animation/animation.js?_yuiversion=2.4.1">
</script>
<script type="text/javascript"
src="../../build/autocomplete/
autocomplete.js?_yuiversion=2.4.1">
</script>
</head>
On the page itself the code is trivial, and again similarly to the Scriptaculous, uses an input filed and a div, with the only difference that they are enclosed in the following:
<div id="statesautocomplete"> <input id="statesinput" type="text"> <div id="statescontainer"></div> </div>
The tying code of the JavaScript Ajax APIs with the HTML INPUT and DIV elements is achieved with the JS YAHOO.widget.AutoComplete object; it takes as parameters the names of the input, div, and dynamic content source. There are also a lot more JavaScript options in YUI than in Scriptaculous. For example, there is an option to fill in the first suggestion in the input field (ex typeAhead = true). Please see the included source code for the full demo.
this.oAutoComp =
new YAHOO.widget.AutoComplete('statesinput','statescontainer',
this.oACDS);
this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp.typeAhead = true;
this.oAutoComp.useShadow = true;
this.oAutoComp.minQueryLength = 0;
this.oAutoComp.textboxFocusEvent.subscribe(function(){
var sInputValue = YAHOO.util.Dom.get('statesinput').value;
if(sInputValue.length === 0) {
var oSelf = this;
setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
}
});
Figure 7 shows the YUI auto-complete combo box.
Figure 7: YUI Auto-complete demo
Conclusion
In this article, I have shown you the new Ajax-based web widget to auto-complete user queries. A lot of rich client interfaces feature this widget, especially on the latest AJAX-enabled web 2.0 sites. This widget offers a lot of benefits to the user and requires little effort to implement, if used with one of the popular AJAX libraries.
I have described three concrete implementations using Dojo, Scriptaculous, and Yahoo User Interface (YUI) libraries, but there are many more. I believe that if you have an option to implement this widget, your users definitely would have an easier time interacting with your site.
Download the Code
You can download the code that accompanies this article here.
References
- wikipedia: en.wikipedia.org/
- Google labs Auto complete: http://www.google.com/webhp?hl=en&complete=1
- Dojo: http://dojotoolkit.com
- http://www.sauter-online.de/dojo/demos/widget/comboBox.html
- Yahoo! User Interface Library (YUI): http://developer.yahoo.com/yui/
- http://developer.yahoo.com/yui/examples/autocomplete/ac_states_jsarray.html
- Script.aculo.us: http://script.aculo.us
- Prototype _JavaScript Library
About the Author
Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He also has worked on defense contracts for the U.S. government. His main interests are object oriented-programming methodologies, UI. and design patterns.
