javascript - 在 jQuery 中搜索字符串数组

Question

在 jQuery 中，我试图构建一个搜索功能。在输入字段中，用户键入一个字符串，每个单词将被放入变量 searchedWords 中。

以下用户搜索输入字符串:

foo bar

将转换为

let searchedWords = ['foo', 'bar'];

---

现在我想使用 jQuery 搜索数组中的所有字符串。所有单词都需要位于类为 '.item' 的 div 文本中。 我已经设法用一个搜索字符串做到了这一点。这样

let searchedWords = 'foo bar';

但是只有当 div .item 文本是 foo bar baz 而不是 foo baz bar 时才会匹配。

jQuery

let divs = $('.item');
let searchedWords = ['foo', 'bar']; 

results = divs.filter(function() {
    return $(this).text().toLowerCase().indexOf($.trim(searchedWords.toLowerCase())) >= 0;
});    

HTML

<div class="item">foo BAZ bar</div>
<div class="item">bar</div> 
<div class="item">baz/div> 

预期的结果是

<div class="item">foo BAZ bar</div>

实际结果

no results...

由于用户可以搜索包含更多单词的字符串(动态)，我不能简单地硬编码

$(this).text().toLowerCase().indexOf($.trim(searchedWords[0].toLowerCase())) >= 0 && 
$(this).text().toLowerCase().indexOf($.trim(searchedWords[1].toLowerCase())) >= 0

// ... etc

---

所以我不确定如何使用 jQuery 过滤功能搜索多个词。

Answer 1

你应该使用 Array.every遍历单词数组并检查元素的内容是否包含列表中的每个单词。

let divs = $('.item');
let searchedWords = ['foo', 'bar']; 

var results = divs.filter(function() {
    return searchedWords.every( word => $(this).text().toLowerCase().indexOf(word) >= 0);
});    

console.log(results.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">foo BAZ bar</div>
<div class="item">bar</div> 
<div class="item">baz</div>