jQuery在属性中分别搜索每个单词

Question

希望我能解释这一点 我需要从输入中搜索每个单词，看看它是否存在于<div>的属性中。这就是我所拥有的：

<input type="text" id="searchInput" onkeyup="filter()" placeholder="Search within results">

<div class="filterSearch" data-tags="evga geforce gtx 1060 03g-p4-6160 ">...Some DIV Info...</div>

的jQuery

        function filter()
        {
            var searchInput = $('#searchInput').val().toLowerCase();
            $(".filterSearch").each(function() {
                if ($(this).attr('data-tags').search(searchInput) > -1) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
        }

现在，当我搜索＆＃34; gtx 1060＆＃34;随着话语紧随其后。但是当我搜索＆＃34; 1060 gtx＆＃34;什么都没有出现。我需要一些帮助来分别搜索每个单词以查看它是否存在于attr-tags中，例如＆＃34; 1060＆＃34;和＆＃34; gtx＆＃34;例如

Answer 1

你说至少有一个写入输入的单词应该匹配div的至少一个标签，对吗？

我坚持这一点，虽然这不是常规方法，因为例如输入 evg 不会显示<div class="filterSearch" data-tags="evga geforce gtx 1060 03g-p4-6160 ">evga geforce gtx 1060 03g-p4-6160</div>。

让我知道

修改 我现在明白你需要输入中的所有单词来匹配标签，而不是至少一个。 试试这个。

＆＃13;

＆＃13;

function filter()
        {
            var searchInput = $('#searchInput').val().toLowerCase();
            var inputAsArray = searchInput.split(' ');
            
            $(".filterSearch").each(function() {
                var show = true;
                filterSearchTagsAsArray = $(this).attr('data-tags').split(' ');
                
                $.each(inputAsArray, function(i, word){
                  if(word !== '' && filterSearchTagsAsArray.indexOf(word) === -1){
                    show = false;
                    return false;
                  }
                });
                if(show)
                  $(this).show();
                else $(this).hide();
            });
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" onkeyup="filter()" placeholder="Search within results">

<div class="filterSearch" data-tags="evga geforce gtx 1060 03g-p4-6160">evga geforce gtx 1060 03g-p4-6160</div>

<div class="filterSearch" data-tags="bvga geforza gty 1090 103g-p4-6160">bvga geforza gty 1090 103g-p4-6160</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Array.every()或Array.some()：

＆＃13;

＆＃13;

function filter() {
  var searchInput = $('#searchInput').val().toLowerCase().split(' ');
  $(".filterSearch").each(function(idx, ele) {
      var tags = ele.dataset.tags.toLowerCase().split(' ');
      if (searchInput.every((eleVal, idx) => {return tags.includes(eleVal);})) {
          $(this).show();
      } else {
          $(this).hide();
      }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="searchInput" onkeyup="filter()" placeholder="Search within results">

<div class="filterSearch" data-tags="EVGA GeForce GTX 1060 03G-P4-6160 ">...Some DIV Info...</div>

＆＃13;

＆＃13;

＆＃13;