JavaScript Tutorials Advanced
Creating an Autosuggest Textbox with JavaScript, Part 1 - Page 4
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!
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.
—
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced
[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Tutorials Advanced -
Creating an Autosuggest Textbox with JavaScript, Part 1 - Page 4
|
