Searching Columns Html Table

I have created a table with HTML and want to integrate a search box that can search 4 columns(name,name2,last_name,last_name2). I tried to find 1 column but after writing the next

Solution 1:

If you type multiple words, you have to filter each of them separately. Otherwise, you're looking for a field that has the entire space-separated string.

This splits the search string, and then shows rows that match any of them.

// FunctionfunctionfilterTable(value) {
     if (value != "") {
         $("#table td:contains-ci('" + value + "')").parent("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;
     }
 });

 // Event listener
 $('#filter').on('keyup', function () {
     if ($(this).val() == '') {
         $("#table tbody > tr").show();
     } else {
         $("#table > tbody > tr").hide();
         var filters = $(this).val().split(' ');
         filters.map(filterTable);
     }
 });

FIDDLE