Поиск столбцов html table

Question

Я создал таблицу с HTML и хочу интегрировать окно поиска, которое может искать 4 столбца (имя, имя2, last_name, last_name2). Я пытался найти 1 колонку, но после записи следующего столбца не показывает ничего

Например, я хочу:

find name and last_name     
find name2 and last_name2 
find last_name and name2 
find name and last_name and name2 

В других словах независимо от того, но после нажатия клавиши «SPACE» не показывая результаты.

Вот моя проблема:

<input type="text" id="filter" /> 
<table id="table"> 
    <tr> 
     <td>foo</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>bar</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>some</td> 
     <td>3</td> 
    </tr> 
    <tr> 
    <td>other</td> 
    <td>4</td> 
    </tr> 
</table> 

Вот мой Javascript:

// Function 
function filterTable(value) { 
    if (value != "") { 
    $("#table tbody>tr").hide(); 
    $("#table td:contains-ci('" + value + "')").parent("tr").show(); 
    } else { 
    $("#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; 
    } 
}); 

// Event listener 
$('#filter').on('keyup', function() { 
filterTable($(this).val()); 
}); 

Пожалуйста, кто знает, как решить эту проблему?

Answer 1

Если вы наберете несколько слов, вы должны отфильтровать каждый из них отдельно. В противном случае вы ищете поле, в котором есть вся строка, разделенная пробелом.

Это разделяет строку поиска, а затем показывает строки, которые соответствуют любому из них.

// Function 
function filterTable(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