April 16, 2014 11:59 am

How to make search input to filter through list using jQuery

In this tutorial I am going to show you how to filter a list using jQuery, suppose we have a big list and want to select some particular text so its best to put an input box so users get fast access of there required text. It will not send any thing to server it will check in your available page list, very simple and short code to implement it.

How to make search input to filter through list using jQuery

[wpdm_file id=97]DEMO

HTML List

<input placeholder="Search..." id="s" type="text" /> 

<ul class="countryList">
    <li><a href="#1">India</a></li>
    <li><a href="#2">United States</a></li>
    <li><a href="#3">Pakistan</a></li>
    <li><a href="#4">Sri Lanka</a></li>
    <li><a href="#5">Bangladesh</a></li>
    <li><a href="#6">Canada</a></li>
    <li><a href="#7">United Kingdom</a></li>
    <li><a href="#8">Australia</a></li>
    <li><a href="#9">Argentina</a></li>
</ul>

Above country list will be filtered on the base of your search, the reason of using search/filter is that this list is unsorted and very difficult to find your desired country so we are using this filter. You can also sort this list using jQuery then people can easily search records.

jQuery

<script>
$('#s').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.countryList>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();            
   });
});
</script>

Above snippet triggered on keyup event and check all countryList items and show the items which match with your given words.

All together:

Complete working code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to make search input to filter through list 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() {
  $('#s').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.countryList>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();            
   });
  });
});
</script>
</head>
<body>
<div style="margin-left: auto;margin-right: auto;width: 200px;">
  <input placeholder="Search..." id="s" type="text" /> 
  <br />
  <ul class="countryList">
      <li><a href="#1">India</a></li>
      <li><a href="#2">United States</a></li>
      <li><a href="#3">Pakistan</a></li>
      <li><a href="#4">Sri Lanka</a></li>
      <li><a href="#5">Bangladesh</a></li>
      <li><a href="#6">Canada</a></li>
      <li><a href="#7">United Kingdom</a></li>
      <li><a href="#8">Australia</a></li>
      <li><a href="#9">Argentina</a></li>
  </ul>
</div>
</body>
</html>
[wpdm_file id=97]DEMO

That’s all for today I hope you like this tutorial please don’t forget to give us your feedback.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

6 responses to “How to make search input to filter through list using jQuery”

  1. kunal says:

    i am also a php developer. now having fun with laravel 4. must recommend it to you all. just give it a try.

    For Admin… can i post some project here “on making web application using laravel 4” ?

  2. s.shivasurya says:

    awsome ! u saved me in a project! i used this snippet.!thanks a lot.
    actually used it in a mobile app!

  3. Marcus says:

    Can anyone please help me with the code for searching (box) through my website information, not the information in the database with php and mysql. Please get back to me ASAP.

  4. mahfuz says:

    this is not working with android chrome browser..

  5. Fabien D. says:

    Hi there, i’m trying to translate your code for my case, but with no success !

    It’s about a table (with MySQL results inside)i want to filter ANY ‘td’ text with the search box to show only tr’s i choose.

    basically :

    if ‘td’ contains ‘search’ => show ‘tr’
    else hide ‘tr’

    The problem is that only the last ‘td’ value is taken as a possible choice.
    So here’s the code, if you can find where the problem is, i’ll be very happy !

    $(document).ready(function() {
    $("#s").keyup(function() {
    var valThis = $(this).val().toLowerCase();
    $(".countryList>td").each(function() {
    var str = $(this).text().toLowerCase();
    if (str.indexOf(valThis) >= 0) {
    $(this).closest("tr").show();
    } else $(this).closest("tr").hide();
    });
    });
    });

    Indonesia
    2
    A

    United States
    2
    A

    Pakistan
    3
    A

    Sri Lanka
    2
    A

    Bangladesh
    2
    A

    Canada
    2
    A

    United Kingdom
    2
    A

    Australia
    2
    A

    Argentina
    2
    B

  6. Серафим Стариков says:

    Who can write a tutorial how to make, on php site, two blocks ?
    1. Related Posts (with Thumbnails)
    2. Most Popular Posts (with Thumbnails)

Leave a Reply

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