Filtering Large Select Lists

If you have a very large HTML SELECT list, finding the correct item can be like looking for a needle in a haystack. For example, if you have a list of a couple hundred names, finding a single one can be difficult. This article describes a JavaScript technique for filtering the items in a select list so that only the matching items are shown, making it much easier to locate the desired item.

The following example shows several ways of filtering the select list.

Features

• Easy to use, object-oriented interface
• Easy to configure: use your existing SELECT list
• Easy to extend: specify a hook function to be called when the filter changes
• Filter using regular expressions
• Filter on the value or the text of the select option:
  <option value="filter this">or filter this
• Case-sensitive or ignore case