Today I am going to write a tutorial about how to search and filter an HTML UL li list using a search input box. Sometimes we have a big unsorted list and it takes lot of time to find exactly what we want, so we can make it easy for user to just search & filter the list. This all is done using a small jQuery function. Lets move on to the solution.
HTML List
Here is an HTML list of famous cities of the world.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input placeholder="Search Here.." id="search" type="text" /> <ul class="famousCities"> <li><a href="#1">NewYork</a></li> <li><a href="#2">Amsterdam</a></li> <li><a href="#3">Karachi</a></li> <li><a href="#4">Ankara</a></li> <li><a href="#5">Baltimore</a></li> <li><a href="#6">Beijing</a></li> <li><a href="#7">Berlin</a></li> <li><a href="#8">Brussels</a></li> <li><a href="#9">London</a></li> <li><a href="#10">Cairo</a></li> </ul> |
So here is a list. Now we can use jQuery to sort this list using an HTML input box. You can create list yourself and list can be as long as you want.
jQuery
This jQuery snippet will do all the searching.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $( document ).ready(function() { $('#search').keyup(function(){ var valThis = $(this).val().toLowerCase(); $('.famousCities>li').each(function(){ var text = $(this).text().toLowerCase(); (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide(); }); }); }); </script> |
This jQuery code will perform a search triggered by a key-up event on famousCities list and will show only items which match with words you entered.
Complete Code
Here is the complete working code that will perform the search.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How to Filter an HTML List using Search Input using jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $( document ).ready(function() { $('#search').keyup(function(){ var valThis = $(this).val().toLowerCase(); $('.famousCities>li').each(function(){ var text = $(this).text().toLowerCase(); (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide(); }); }); }); </script> </head> <body> <div style="margin:auto;width: 250px;"> <input placeholder="Search Here.." id="search" type="text" /> <br /> <ul class="famousCities"> <li><a href="#1">NewYork</a></li> <li><a href="#2">Amsterdam</a></li> <li><a href="#3">Karachi</a></li> <li><a href="#4">Ankara</a></li> <li><a href="#5">Baltimore</a></li> <li><a href="#6">Beijing</a></li> <li><a href="#7">Berlin</a></li> <li><a href="#8">Brussels</a></li> <li><a href="#9">London</a></li> <li><a href="#10">Cairo</a></li> </ul> </div> </body> </html> |
If suppose i have ul inside li, the search is not working for me. Please check the below example when i try to find KA its not showing for me 🙁
India
KA </ul
Amsterdam
Karachi
Ankara
Baltimore
Beijing
Berlin
Brussels
London
Cairo