JS Snippets: Filter a List with jQuery and JavaScript Regular Expression
May 19, 2013 9:21 pm Leave your thoughts
Have you ever had to present a list then filter based on the keywords that the user entered? I have and it was pretty simple to do, however it did require a bit of research. Since I’ve done it I might as well share it with you all. The technique involves the use of a couple in-built jQuery functions and javascript regular expression matching. So basically our aim in this exercise is to show only the list item that contains the correct keyword, basically hiding those list items that do not have the matching keyword.
So, let’s create our list of images with simple UL listing. The images thumbnails are taken from rv35mm.com with permissions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
search: <input type="text" id="search" /> <ul id="imageCollection"> <li> <img src="http://www.codingepiphany.com/sample_thumbs/flower.jpg" /> </li> <li> <img src="http://www.codingepiphany.com/sample_thumbs/building_black_and_white.jpg" /> </li> <li> <img src="http://www.codingepiphany.com/sample_thumbs/mushroom_edible.jpg" /> </li> <li> <img src="http://www.codingepiphany.com/sample_thumbs/building_sculpture.jpg" /> </li> <li> <img src="http://www.codingepiphany.com/sample_thumbs/flower_macro.jpg" /> </li> <li> <img src="http://www.codingepiphany.com/sample_thumbs/volcano_clouds.jpg" /> </li> </ul> |
Basically the above is just a simple list of images, with a search box. What we want is that on each keystrokes, a javascript action is executed to hide the images that doesn’t match the keyword. So have a look at the code snippets below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('#search').keyup(function() { var filterValue = $(this).val(); //make sure we start with showing all $('#imageCollection > li').each(function(index, item) { $(this).show(); }) //search the things that doesn't contains the search value var itemsToHide = $('#imageCollection').find('li').not(function(index) { var currentLiCode = $(this).html(); //return the result of the pattern matching of our word from the search bar. The gi means global, case insensitive search return currentLiCode.match(new RegExp(filterValue, "gi")); }) //hide the non-matching items itemsToHide.each(function(index) { $(this).hide(); }) }) |
The codes above save the value from the textbox in a variable in the local scope filterValue. Then it proceed to make sure that every single images are displayed by default.
At the core of the logic is the matching function. The portion of the code finds all the li elements that do not match the filterValue, this is done by the .not selector fed with custom matching function. Our custom matching function basically takes the current contains of the li into a HTML string and uses the standard JavaScript “match” function and RegExp object to filter by the filterValue.
Lastly, once all the items that doesn’t match the keyword is found, we hide all of them, leaving only the matching images behind. Have a look at the JsFiddle below for a quick demonstration. If you start typing in the word flower, the other images that doesn’t match that will be hidden.
Take this piece of code with a grain of salt, this is a very quick solution that I came up in about 30 minutes. If you find a better way, do leave your suggestions in the comments for others to read :)
Categorised in: Javascript, jQuery