搜索列html表

问题描述：

我创建了一个包含HTML的表，并希望集成一个搜索框，可以搜索4列（name，name2，last_name，last_name2）。我试图找到1列，但在写完下一列后没有显示任何内容

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 column is not showing anything

例如我想：

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

在其他词汇中，无论订单如何，但在按下SPACE键后都没有显示结果。

In others words no matter the order but after pressing the key "SPACE" is not showing results.

这是我的问题：

<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：

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

有人知道怎么解决这个问题吗？

Please someone knows how to resolve this?

答

如果键入多个单词，则必须分别过滤每个单词。否则，您正在寻找具有整个空格分隔字符串的字段。

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.

这会拆分搜索字符串，然后显示与其中任何一个匹配的行。 / p>

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

// 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

相关推荐