Need to make a search bar only search what's in a table

So I have the code to create a search bar, I have also created a basic table in html. How do I get the search bar to only search the table? I heard that you can give a class to the table and then change the data collection in the search bar to search that class, right?

  • Brittney
    • New Recruit

    Hi Guys! If you want the code on how to filter an html table, here it is!

    var $rows = $('.your-table tbody tr');

    $('#id of your search bar').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

    $rows.hide().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    var matchesSearch = true;

    $(val).each(function(index, value) {
    matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);

    return matchesSearch;
    }, 0, false));

    function debounce(func, wait, immediate) {
    var timeout;
    return function() {
    var context = this, args = arguments;
    var later = function() {
    timeout = null;
    if (!immediate) func.apply(context, args);

    var callNow = immediate && !timeout;
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.