使用 javascript 依次循环遍历一个数组和另一个数组

Question

我有一个过滤器函数，它需要根据输入字段的值检查元素数组。我最初使用 this solution，但当输入第二个或第三个词时，它会重新评估所有结果。

这是我的情况Fiddle。

目前，如果我输入“鱼”，它将只返回包含“鱼”的行，到目前为止一切顺利。如果我还输入'yellow'，所以'fish yellow'，它返回'Fish'和'Parrot'，而我实际上希望它仍然只返回'Fish'，因为它是唯一包含所有术语的行 在输入字段中。

所以不要像这样过滤：

input value = "Term1 Term2 Term3"

1. Term1，重新开始，然后
2. Term2，重新开始，然后
3. 第三学期，重新开始……

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

1. Term1，然后
2. Term1 和 Term2，然后
3. Term1 和 Term2 和 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/ 的match 示例

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

Answer 3

试试

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>