搜索列 html 表答案

【问题标题】：Searching columns html table搜索列 html 表
【发布时间】：2013-09-06 00:54:30
【问题描述】：

我用 HTML 创建了一个表格，并希望集成一个可以搜索 4 列（名称、名称 2、姓氏、姓氏 2）的搜索框。我试图找到 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());
 });

请问有人知道如何解决这个问题吗？

【问题讨论】：

标签： javascript jquery html search html-table

【解决方案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

【讨论】：