0

HTML でテーブルを作成しましたが、4 つの列 (name,name2,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());
 });

誰かがこれを解決する方法を知っていますか?

4

1 に答える 1

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);
     }
 });

フィドル

于 2013-09-02T22:15:30.043 に答える