Search HTML table with JS and jQuery

Question

I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow.
But somehow, the things I've found, that should work, dont work for me?

Here is the code, both HTML and JS.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="C.Palma" />
    <meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />

    <title>World of Warcraft Characters.</title>

    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>

    <script type="text/javascript">
        // When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
        $(document).ready(function(){
            // Write on keyup event of keyword input element
            $("search").keyup(function(){
                // When value of the input is not blank
                if( $(this).val() != "")
                {
                    // Show only matching TR, hide rest of them
                    $("#table tbody tr").hide();
                    $("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                }
                else
                {
                    // When there is no input or clean again, show everything back
                    $("#table tbody tr").show();
                }
            });
        });
        // jQuery expression for case-insensitive filter
        $.extend($.expr[":"],
                {
                    "contains-ci": function(elem, i, match, array)
                    {
                        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });
    </script>

</head>
<body>

    <div class="row large-centered">
        <h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Type to search..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Character name</th>
                    <th>Class</th>
                    <th>Realm</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>

</body>
</html>

For one thing, $("search").keyup(...) should be $("#search").keyup(...). — Ben Jackson
– Ben Jackson, Commented Dec 13, 2013 at 13:21

Cracker0dks · Accepted Answer · 2017-07-24 13:48:53Z

36

I have put the part of your code that matters and wrote a working fiddle

http://jsfiddle.net/9hGym/602/

this is now the search engin:

    var searchText = $(this).val().toLowerCase();
    $.each($("#table tbody tr"), function() {
        if($(this).text().toLowerCase().indexOf(searchText) === -1)
           $(this).hide();
        else
           $(this).show();                
    });

you can also use http://www.datatables.net/ for such things ;)

edited Jul 24, 2017 at 13:48

answered Dec 13, 2013 at 13:33

Cracker0dks

2,5102 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yes Barry · Accepted Answer · 2015-02-12 19:26:39Z

I found that the above solution was fine in theory (although it didn't work), but I found this to work better:

$('#search-field').on('keyup', function(e) {
    if ('' != this.value) {
        var reg = new RegExp(this.value, 'i'); // case-insesitive

        $('.table tbody').find('tr').each(function() {
            var $me = $(this);
            if (!$me.children('td:first').text().match(reg)) {
                $me.hide();
            } else {
                $me.show();
            }
        });
    } else {
        $('.table tbody').find('tr').show();
    }
});

If you want to search more than one column then just change:

if (!$me.children('td:first').text().match(reg)) {

To:

if (!$me.children('td').text().match(reg)) {

Jose Castellanos · Accepted Answer · 2016-10-19 14:32:40Z

The ways posted were a little slow for my table. I came up with a different solution that seems to be much faster.

If you want to search through every cell you can add an attribute to the cell (I used data-name), ex:<td data-name="john smith">John Smith</td>. Then you can use this javascript code:

$("#search").keyup(function() {
  var val = this.value.trim().toLowerCase();
  if ('' != val) {
    var split = val.split(/\s+/);
    var selector = 'td';
    for(var i=0;i<split.length;i++){
      selector = selector+'[data-name*='+split[i]+']';
    }
    $('tr').hide();
    $(selector).closest('tr').show();
  } else {
    $('tr').show();
  }
});

If you just want to search a rows for a single attribute you can just add the attribute to the row like <tr data-name="john smith"><td>John Smith</td><td>...</td></tr> and use the following:

$("#search").keyup(function() {
  var val = this.value.trim().toLowerCase();
  if ('' != val) {
    var split = val.split(/\s+/);
    var selector = 'tr';
    for(var i=0;i<split.length;i++){
      selector = selector+'[data-name*='+split[i]+']';
    }
    $('tr').hide();
    $(selector).show();
  } else {
    $('tr').show();
  }
});

Hope that helps!

Mahmud · Accepted Answer · 2020-01-07 08:35:33Z

0

I used this precise code snippet in my project to make table searchable

<script>
    $(document).ready(function () {
        $("#input").on("keyup", function () { //here #input textbox id 
            var value = $(this).val().toLowerCase();
            $("#table tr").filter(function () { //here #table table body id 
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>

and don't forget to add this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

edited Jan 7, 2020 at 8:35

answered Jan 7, 2020 at 7:55

Mahmud

4015 silver badges13 bronze badges

Comments

Kalu Singh Rao · Accepted Answer · 2015-11-30 11:33:24Z

-1

You can use this code. It is working excellent.

$('#search').keydown(function () {
      var searchitem = $('#search').val();
      if (searchitem == '' || searchitem == null || searchitem == undefined)           {
          $('#table tbody tr').show();
      }
      else {
          searchitem = searchitem.toUpperCase();
          $('#table tbody tr').hide();
          $('#table tbody tr').each(function () {
              if ($(this).text().indexOf(searchitem) > -1) {
                  $(this).show();
              }
          });
      }
  });

answered Nov 30, 2015 at 11:33

Kalu Singh Rao

1,6971 gold badge16 silver badges21 bronze badges

Collectives™ on Stack Overflow

Search HTML table with JS and jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related