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 wo

Answer 1

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 ;)

Answer 2

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!

Answer 3

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();
              }
          });
      }
  });

Answer 4

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>

Answer 5

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)) {