Creating an Autosuggest Textbox with JavaScript, Part 1 | 4
Creating an Autosuggest Textbox with JavaScript, Part 1
Suppose you want users to fill in their home state (in the United States) and want to provide suggestions as they type. For this, you would define a suggestion provider that contains an array of state names, such as this:
function StateSuggestions() {
this.states = [
"Alabama", "Alaska",
"Arizona", "Arkansas",
"California", "Colorado",
"Connecticut",
"Delaware", "Florida",
"Georgia", "Hawaii",
"Idaho", "Illinois",
"Indiana", "Iowa",
"Kansas", "Kentucky",
"Louisiana",
"Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri",
"Montana",
"Nebraska", "Nevada",
"New Hampshire", "New Mexico", "New York",
"North Carolina",
"North Dakota", "Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Rhode
Island", "South Carolina", "South Dakota",
"Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West
Virginia", "Wisconsin", "Wyoming"
];
}
The StateSuggestions constructor creates the array of state names
and stores it in a property. This array will be used every time suggestions
are made. The only other step is to define requestSuggestions().
Inside of requestSuggestions(), you first need to define the suggestions
array and get the current value of the autosuggest control:
StateSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl)
{
var aSuggestions = [];
var sTextboxValue = oAutoSuggestControl.textbox.value;
//more code
};
Next, you need to be sure the textbox actually contains text (there's no reason
to suggest anything if the textbox is empty). If so, then simply loop through
each state name to see if it begins with the text in textbox; the indexOf()
method will return 0 if this is the case. When a suggestion is found, it should
be added to the suggestions array. Lastly, the suggestions array should be passed
into the control's autosuggest() method. Here's the complete code:
StateSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl)
{
var aSuggestions = [];
var sTextboxValue = oAutoSuggestControl.textbox.value;
if (sTextboxValue.length > 0){
for (var i=0; i < this.states.length;
i++) {
if (this.states[i].indexOf(sTextboxValue)
== 0) {
aSuggestions.push(this.states[i]);
}
}
oAutoSuggestControl.autosuggest(aSuggestions);
}
};
The algorithm used in this method is very generic and can be used for gathering suggestions from any array of values.
Example
With the autosuggest control and a suggestion provider built, it's time to test out your creation. Here's an example:
<html>
<head>
<title>Autosuggest Example
1</title>
<script type="text/javascript"
src="autosuggest1.js"></script>
<script type="text/javascript"
src="suggestions1.js"></script>
<script type="text/javascript">
window.onload
= function () {
var
oTextbox = new AutoSuggestControl(document.getElementById("txt1"),
new StateSuggestions());
}
</script>
</head>
<body>
<p><input type="text"
id="txt1" /></p>
</body>
</html>
The autosuggest1.js file contains the AutoSuggestControl
definition; suggestions1.js contains the StateSuggestions
definition. Since the autosuggest control requires a reference to the textbox,
you must wait until the page has been completely loaded. So, in the window.onload
event handler, an AutoSuggestControl object is created. The textbox
to use has an id of "txt1", so a reference to it is easily retrieved
using document.getElementById(). A StateSuggestions object is created
and immediately passed to the autosuggest control as well. And that's it!
You can view the example here (it should work in Internet Explorer 5.5+ and Mozilla 1.0+, including Firefox) or download it.
The autosuggest control in this article only implements type ahead functionality, which provides a single suggestion for what the user has typed. In the next part, you'll learn how to create a dropdown list of multiple suggestions as well as how to navigate it using the keyboard.
About the Author
Nicholas C. Zakas is a user interface designer for Web applications and the author of Professional JavaScript for Web Developers (Wiley Press, ISBN 0764579088). Nicholas can be contacted through his Web site, http://www.nczonline.net/, where he provides open source JavaScript libraries and tools.
Created: March 27, 2003
Revised: March 21, 2005
URL: http://webreference.com/programming/javascript/ncz/1
