Eric Bruno

Dr. Dobb's Bloggers

Real-Time List Filtering in HTML5/JavaScript

August 12, 2013

I recently rewrote code in JavaScript that demonstrates how to easily search for an item in a listbox, where the total list of items are narrowed down as you type.

A little over a year ago, I wrote a blog with code that demonstrates how to easily search for an item in a listbox, where the total list of items are narrowed down as you type. The contents of the listbox are filtered to contain only those items that contain the text you're typing, with each keystroke, regardless of case.

This is a neat little trick because the contents of the list are filtered and updated in real-time as you type, and it even supports the backspace key, adding back items as you delete characters from your search. That blog illustrated this technique using Java and JavaFX. I recently rewrote this code in JavaScript to work within an HTML5 web application. Below is how the list looks in its initial state, containing all of the entries:

Let's imagine there are hundreds of items in this list, making it difficult to scroll through the list to find one item of interest. To keep this example simple, however, there are only 10 entries. Let's begin by examining the code that handles keystrokes. First, add a key handler for the input textbox when the browser loads the web page:

The handleKeyPress() function will now get called whenever a key is pressed within the "filter" input box. This is where the magic happens. First, the original list of entries within the listbox is saved (this happens only once):

Next, a check is made to see if the user hit the backspace key. If so, the list's entries are restored to the original set of entries. Filtering will take place all over again with the shortened filter text in a moment.

// If the number of characters in the text box is less than last time
// it must be because the user pressed delete
if ( oldVal !== null && (newVal.length < oldVal.length) ) {
// Restore the lists original set of entries
// and start from the beginning
for ( c = 0; c < originalentries.length ; c++ ) {
select.add(originalentries[c]);
}
}

Next, each word typed into the filter input box is separated using the split() function. Each listbox entry that does NOT contain all of the words entered (regardless of order) is placed in a list of entries to be removed from the list box:

In action this appears to be complex, but the code works quite simply. Here are the general steps (in a slightly different order than in the code):

Loop through all the items in the list

Check each item to see if it contains the text entered in any order. Example: typing "Bruno Eric" matches the listbox entry "Eric Bruno" and will allow it to remain in the list.

If the user hits the backspace key, restore the list to its full set of original entries, and search from the top again

The screenshot below shows the listbox after typing the text "Br":

This is a simplified example of a real-world scenario where it can often be helpful to provide flexibility when searching through long lists of text. And, this flexibility need not be difficult to implement. Here is the code for a full HTML/JavaScript example you can run yourself.

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Video

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!