Creating an Autosuggest Text Box - Java Script

Let’s face it, people really don’t enjoy filling out forms,especially when values need to be typed in. That’s why applications like Microsoft Outlook incorporate autosuggest text boxes,which are text boxes that examine the first few characters a user has typed and then suggests a word (or multiple words) from a given list that may complete his entry.Web browsers also work in this way when you are typing a Web address.With a little bit of JavaScript trickery, it’s possible to create the same type of behavior in Web forms.


The first step in the process is to write a method to search an array of strings and return all values that begin with a certain set of letters (for example,if you pass in a,the method returns all values in the array beginning with the letter a).This method is called TextUtil. autosuggest Match() and takes two arguments: the text to match and the array of values to match against.

The first step in this method is to create an array to return all matching values.Next,the method checks to ensure that the string to match isn’t empty (an empty string is always considered to be present in any string).If the string isn’t empty,a simple for loop is used to check each value to see if it begins with the string.To determine this, the indexOf() method is used. When indexOf() returns 0,it means that the string is present at the beginning of the value, so it should be added to the result array. Finally,the array of matching values is returned.

The guts

With the matching method complete,it’s time to create the most important part of the script: the TextUtil.autosuggest() method.This method takes three arguments: the text box to act on, an array of possible values, and the ID of a list box in which the suggestions should be displayed.Assuming that the array of values is called arrValues, the call looks like this:

The onkeyup event handler is used because the keyup event fires after a character has been entered into the text box, allowing the suggestions to be made on the most recent change to the text box. The method is defined as follows:

This method begins by getting a reference to the list box with the ID of sListboxId.The list box is then cleared of all prior options by using the ListUtil.clear() method explained earlier Next, the method calls TextUtil. autosuggestMatch() to get the matching values for the string in the text box.The last step is to iterate through the matching values and add them to the list box by using the ListUtil.add() method.

To use this method,you must set up a text box and list box on a page along with an array of values to use. The values should be in alphabetical order so that they appear in alphabetical order when suggested to the user. Here’s an example page:

In this example, an array of colors called arrColors is defined. Because the values aren’t in alphabetical order, the sort() method is called after the array is created.It is this array that is referenced by TextUtil.autosuggest().The list box with the ID “lstColors” contains the suggestions for what the user may want to type.This list box also has an onclick event handler that simply sets the text box value to the currently selected option (this is for convenience, although it isn’t a necessary part of the autosuggest functionality). The setText() method takes two arguments: the list box and the ID of the text box. The method then gets a reference to the text box and sets its value to the currently selected value in the list box.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Java Script Topics