Javascript Autocomplete Combobox - find as you type

Below is an implementation in client-side Javascript of an auto-completing combobox. The options are printed in a Javascript array that is embedded in the source code sent to the browser. The PrintJavascriptArray function can print this array quickly from ASP. The options list refreshes whenever a key is pressed. Options in the array that match the search term are displayed.

The search mode can be set to "starts with" or "contains". Only a fixed number of the matches are displayed, because adding options to a selection box in Javascript is very slow. This number can be configured and set to the size of the selection box (so it always appears full). If the user wants to scroll through all the matches, then he or she can click the "Load All Matches" button. They will have to wait, but it will load the whole array into the selection box.

When the list narrows to a single entry, the single options becomes highlighted. The form can then be submitted by pressing "Enter". If the keyboard focus is set to the search term input box on page load, then this becomes a fast, entirely keyboard-based interface. Interfaces like these are used by the telephone directory operators you reach when you call 411. One of my clients uses this interface to manage his 2000+ patients. That interface has an additional "search first name" option, which is activated whenever the secretary types a comma as the first character of the search term.

In this particular example, clicking on a function name (or pressing enter) will jump to the PHP reference page for that function. (The PHP website has recently implemented their own auto-completing combobox on their search page.) Jumping to a page is a common behaviour, but you can change it as you need.

To get the source for this combobox, just use the view source command from your web browser. To see it in action, go to Javascript Autocomplete Combobox and Search Widget.

ASP Speed Tricks Site Map

1. ASP Speed Tricks
2. Optimized Table Printing in ASP
3. Optimized Heirarchical Table Printing in ASP
4. Print Javascript Array from ASP
5. Print Select Options from ASP
6. Javascript Autocomplete Combobox - find as you type ← You Are Here
7. ASP Speed Tricks Appendix
8. ASP Speed Tricks PDF Format