Easy Search As You Type List Filtering with jQuery

This post shows a quick and easy way of searching or filtering a list by typing into a textbox. Matching list items are revealed as you type.

This is great for working with any list to long to scan in a couple of seconds or it can be used for autocomplete or suggestions on searches, a better supported substitute for the HTML5 datalist input or simply add some checkboxes to create a multi-select control.

In this simple example we’ll filter a list of 5 dinosaurs. First, our HTML. We need a textbox and an unordered list:

<input type=”text” id=”dino-search” placeholder=”Search Dinosaurs (start typing)”>

<ul id=”dino-list”>
  <li>Triceratops</li>
  <li>Stegasaurus</li>
  <li>Tyrannosaurus Rex</li>
  <li>Diplodocus</li>
  <li>Pteradactyl</li>
</ul>

The actual filtering is done using jQuery and straight JavaScript. You’ll need to reference jQuery in your page, before the JavaScript block.

Here is the JavaScript. I’ll then explain it a line at a time.

$(document).ready(function () {

/* initially hide list items */
$(“#dino-list li”).hide();

/* filter dinosaurs as you type */
$(“#dino-search”).on(“keyup click input”, function () {
if (this.value.length > 0) {
  $(“#dino-list li”).hide().filter(function () {
    return $(this).text().toLowerCase().indexOf($(“#dino-search”).val().toLowerCase()) != -1;
  }).show();
}
else {
  $(“#dino-list li”).hide();
}
});

});

First of all we hide all the list items. The list itself, the <ul> element, is still shown but the items are hidden from view.

$(“#dino-list li”).hide();

To do the filtering we catch the keyup event on the search box. Every time a key is released while in the textbox the function gets fired. We’ve also used the click event to catch the user clicking the cross to clear the text box in some browsers as well as the input event to catch text being pasted in.

$(“#dino-search”).on(“keyup click input”, function () {
  …
});

If there is any text in the text box (its value has a length greater than zero) we filter, otherwise we keep all the items hidden. This is important so that we can go backwards and delete the search text without breaking it. The this.value.length is JavaScript and slightly easier to read than writing the jQuery version of $(this).val().length though it’s exactly the same in meaning.

if (this.value.length > 0) {
  …
}
else {
$(“#dino-list li”).hide();
}

We’re now looking at the section within the keyup event, where we have some text to match. We now make sure we hide the items again, filter the selection using jQuery’s filter function and then show the new selection of list items.

$(“#dino-list li”).hide().filter(function () {
  …
}).show();

Finally, the content of the filter function. Remember, we have all the list items selected and hidden in the previous line. Now we return list items where the text of the list item converted to lower case contains the value of the text box, also converted to lower case.

return $(this).text().toLowerCase().indexOf($(“#dino-search”).val().toLowerCase()) != -1;

The ‘contains’ part is done by using the indexOf() function which finds the index (numerical place) of a character within a string. This is zero indexed so the first character is 0, the second 1, etc. If the character or selection of characters is not found the function returns a value of -1. So, here we are saying if the index is not ‘not found’, which equates to ‘is found’.

This is the shortest way I’ve found of doing this but if anyone can do it with less code then I’d be very interested to see it. Please leave a comment.

Update

Changed the .keyup() event to .on(“keyup click input”) so that the user clicking the cross to clear the text box is caught by click() and resets the search results. The input() event catches text being pasted into the text box so we’ve now got all forms of input covered.

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in click(), datalist, filter(), html, indexOf(), input(), JavaScript, jQuery, on(), toLowerCase() and tagged , , , , , , , , , , . Bookmark the permalink.

4 Responses to Easy Search As You Type List Filtering with jQuery

  1. Raf says:

    Thank you arjun menon your code worked for me

  2. Peter says:

    Exactly what i needed, thanks!

  3. arjun menon says:

    hey i figured that out.
    http://jsfiddle.net/rb7hm/4/

    how can i integrate your highlight option with this code.

  4. arjun menon says:

    hi
    your technique is really neat and concise.

    my scenario has a row of data containing title, description, date, author. can it be modified to search only by the title and hide the rest of rows.
    now it only hides the title from other rows not matching the value in search box.

    also, how to list the results alphabetically.

    thanks

Comments are closed.