Adding Searching to the TableListJS HTML5 Component

169 VIEWS

In a previous article, I introduced a scrollable HTML multi-column table with selectable rows. In effect, the HTML table becomes a scrollable, multi-column list that you can use in forms where the user can make a selection. In this blog, we’ll add a search box (outlined in red in Figure 1) to provide searching and filtering to the list to quickly find entries without scrolling and hunting.

Figure 1 – The TableListJS HTML component with an integrated search field

First, the HTML for this is similar to the previous article, with the single addition of an HTML field, highlighted in bold in Listing 1.

Listing 1 – Snippet of HTML code for the TableListJS component with search field

Next, to handle the keyboard input from the search field, we add a JavaScript function to the updated tablelist.js file (introduced previously) to insert a keyboard handler (see Listing 2). This only needs to be done once, so there’s a flag (initComplete) to indicate this. This flag is checked elsewhere.

Listing 2 – This initializer function inserts a keyboard handler for the TableListJS search field.

The initTableJS() function only needs to be called once. It searches for an element on the page with the name filterTxt (which was specified in the page HTML shown in Listing 1). Once found, a keyboard handler is added by assigning a function to the onkeyup() event. Let’s take a look at the custom keyboard handler, handleKeyPress(), now.

Inside the handleKeyPress() Function

Here are the overall steps that occur when a key is pressed within the field:

  1. Loop through all the rows in the list.
  2. Check each row to see if the columns contain the text entered, in any order. Example: typing “Bruno Eric” would match the list entry “Eric Bruno,” or even “Eric J. Bruno.” Either way, it would remain in the list.
  3. Remove (hide) rows that don’t match the search text.
  4. If the user hits the backspace key, restore the list to its full set of original entries, and search from the top again.
  5. First, a check is made to see if the user hit the backspace key (see Listing 3). If so, the list’s entries are restored to display the entire set of entries, and filtering takes place on this restored list of entries. Otherwise, the list of entries is further filtered with each keystroke (more on that in a moment).

    Listing 3 – Part of the keyboard handler function, to handle the backspace key.

    As characters are entered into the search field, the list is continuously filtered to match what’s been entered so far. If you type multiple words or characters separated by spaces, they’re split up using the JavaScript split() function. Each list row that does NOT contain all of the words entered (regardless of order) is marked to not be displayed:

    There are some things to point out in this code before we continue. First, since each list “row” is really made up of multiple table column entries, each column’s text needs to be checked against each search term entered. Therefore, there are three nested loops: the first iterates each row, the second iterates each of the search terms (separated by spaces), and the third iterates each column in the current row. If each of the search terms matches entries across all of the row’s columns, then that row is kept in the list. If the aggregation of a row’s column entries doesn’t match all of the search terms, that row is marked for removal from the list:

    The entries aren’t really removed—They’re just marked to not be displayed. This makes it easy to restore them as the text in the search box is deleted.

    Here’s the list in action, although you should try it for yourself. The screenshot below shows the result after typing “4” into the search field:


    The screenshot below shows the result after typing “E” into the search field:

    If you type “E 4” (or “e 4”), then there are no matches, because there are no rows that contain words with both the letter “e” and the number “4” in them:


    That’s it! You can download the updated TableListJS code along with a sample HTML page here to try it in action. In my experience, it’s a very dynamic way of filtering items in a long list, and users have liked it. The fact that it’s combined with the multi-column, scrollable table makes it a very useful HTML component.

    Do you think you can beat this Sweet post?

    If so, you may have what it takes to become a Sweetcode contributor... Learn More.

Eric Bruno is a contributing editor to multiple publications with more than 20 years of experience in the information technology community. He is a highly requested speaker and writer for topics spanning the technology spectrum, from mobile to the data center.


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu