Question

我有一些jQuery正在努力制作一个简单的搜索/过滤功能。该功能允许用户键入文本字段，然后它仅显示具有这些字符的列表项，即键入“红色”，它显示所有列表项目中包含“红色”。

我的问题是它只适用于确切的输入，即如果输入'红色蓝色'，它只会找到'红色蓝色'，而不是'蓝色红色'或其他'红色'项目。

有人可以帮我解决问题吗？

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="box" type="text" placeholder="Search">

<ul class="filterlist" style="list-style:none;">
  <li>red</li>
  <li>blue</li>
  <li>red blue</li>
  <li>blue red</li>
</ul>

{{1}}

Answer 1

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();

  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var subValues = valThis.trim().split(' ');

    $('.filterlist>li').each(function () {
      var node = $(this);
      var text = node.text().toLowerCase();

      if (subValues.some(function (word) {
        return text.indexOf(word) !== -1;
      })) {
        node.show();
      }
      else {
        node.hide();
      }
    });
  };
});

https://jsfiddle.net/0xjwapdf/

根据评论中的建议，我们将搜索字词拆分为单独的字词，然后搜索每个字词。

Answer 2

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var test = valThis.split(" ");
    if(test.length >1) {
        console.log("More then one word")
        $('.filterlist>li').each(function() {
        var text = $(this).text().toLowerCase();
            $.each(test, function( index, value ) {
                  (text.indexOf(value) >= 0) ? $(this).show(): $(this).hide();
            });

        });
    }else{
        $('.filterlist>li').each(function() {
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
        });
    }
  };
})

更新了jQuery，如果有多个单词出现，我们将检查文本框中的每个单词。

如何让jQuery识别单独的值

2 个答案: