循环顺序通过一个数组与另一个数组与javascript

Question

我有一个过滤器函数，需要检查一个元素数组与输入字段的值。我原本使用this solution，但它重新评估全部结果当输入第二个或第三个术语。

这是我的情况Fiddle。

目前，如果我输入'鱼'，它将只返回包含'鱼'的行，到目前为止这么好。如果我还输入'yellow'，那么'fish yellow'，它会返回'Fish'和'Parrot'，但实际上我只希望它只返回'Fish'，因为它是唯一包含全部条款输入字段。的

所以不是过滤这样的：

input value = "Term1 Term2 Term3"

1. 起租1，再次开始，然后
2. 词条2，重新开始，然后
3. TERM3，重新开始...

有没有办法像这样过滤'jo'数组：

1. 起租1，然后
2. 起租1和词条2，然后
3. 起租1和词条2和TERM3等？

下面，我试图推动在输入字段中的单词数到另一个数组，然后试图通过所有的话得到它的循环顺序，但它不工作:(

HTML

<input id="filter-field" placeholder="Search" type="text" /> 

<table cellspacing="0" cellpadding="0" > 
    <thead> 
     <tr> 
      <th>Pet</th> 
      <th>Colour</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr>  
      <td>cat</td> 
      <td>white</td> 
     </tr> 
     <tr> 
      <td>dog</td> 
      <td>black</td> 
     </tr> 
     <tr> 
      <td>parrot</td> 
      <td>yellow</td> 
     </tr> 
     <tr> 
      <td>fish</td> 
      <td>yellow</td> 
     </tr> 
     <tr> 
      <td>hamster</td> 
      <td>black</td> 
     </tr> 
    </tbody> 
</table> 

jQuery的

$("#filter-field").on('input', function() { 

     // Split the current value of searchInput 
     var data = this.value.split(" "), 
      inputLength = $("#filter-field").val().length; 

     // Create a jquery object of the rows 
     var jo = $("table > tbody").find("tr"); 

     if (this.value == "") { 
      jo.show(); 
      return; 
     } 

     // Hide all the rows 
     jo.hide(); 

     jo.filter(function() { 
      var $t = $(this), 
       textField = $('#filter-field').val().split(" "), 
       wordCount = textField.length - 1, // Get length of array, then subtract 1 so 'word #1' matches 'position 0' in array 
       wordCounter = []; 

      // I wanted this to end up as [1, 2, 3, 4 etc] to somehow check each word against 'jo', but each .push() simply adds 1 to the first array value 
      wordCounter.push(wordCount); 

      // I want this to check for 'word A', then if I enter further words, 'word A and word B' etc 
      if ($t.is(":contains('" + textField[wordCounter] + "')")) { 
       return true; 
      } else { 
       return false; 
      } 

     }).show(); 
}); 

Answer 1

您接近问题的方式看起来很尴尬。我觉得这样的事情应该很好地工作：

 jo.filter(function() { 
      var $t = $(this), 
       textField = $('#filter-field').val().split(" "); 

      for(var i=0; i<textField.length; i++) 
      { 
       if (!$t.is(":contains('" + textField[i] + "')")) 
       { 
        return false; 
       } 
      } 
      return true; 

     }).show(); 

Answer 2

我认为你应该使用你原来的代码https://jsfiddle.net/L83j3p79/4/

jo.filter(function() { 
     var textField = $.trim($('#filter-field').val()).split(" "); 
     var theSearch = textField.join("|"); 
     return (this.textContent || this.innerText).match(theSearch); 
}).show(); 

Answer 3

一个match例尝试

var input = $("#filter-field") 
 
, tr = $("table tbody tr"); 
 

 
input.on("input", function(e) { 
 
    var val = e.target.value 
 
    , term = /\s/.test(val) ? val.split(/\s/) : [val] 
 
    , res = $.map(tr.find("td"), function(elem) { 
 
      var el = $(elem) || elem; 
 
      return term.length === 1 
 
        ? $.inArray(el.html(), term) !== -1 
 
        && el.parent().show() 
 
        : $.inArray(el.html(), term) !== -1 
 
        && $.inArray(el.siblings(el.nodeName).html(), term) !== -1 
 
        ? el.parent().show() 
 
        : el.parent().hide() && null 
 
    }).filter(Boolean); 
 
    if (!val.length) { tr.hide() }; 
 
});

table tbody tr { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input id="filter-field" placeholder="Search" type="text" /> 
 

 
<table cellspacing="0" cellpadding="0"> 
 
    <thead> 
 
    <tr> 
 
     <th>Pet</th> 
 
     <th>Colour</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>cat</td> 
 
     <td>white</td> 
 
    </tr> 
 
    <tr> 
 
     <td>dog</td> 
 
     <td>black</td> 
 
    </tr> 
 
    <tr> 
 
     <td>parrot</td> 
 
     <td>yellow</td> 
 
    </tr> 
 
    <tr> 
 
     <td>fish</td> 
 
     <td>yellow</td> 
 
    </tr> 
 
    <tr> 
 
     <td>hamster</td> 
 
     <td>black</td> 
 
    </tr> 
 
    </tbody> 
 
</table>