Question

我有一个名为test

的无序列表

<ul id='test'></ul>

通过ajax动态填充数据。每个项目'li'都是包含'p'段落的div。每个段落都包含一些信息。

例如：

<li> <div> <p> test </p> </div> </li>
<li> <div> <p> hi how is it going?</p> </div> </li>
<li> <div> <p> not a test</p> </div> </li> 
<li> <div> <p> whoa</p> </div> </li>

我还有一个搜索框，我可以从中获取搜索词，我使用：

var searchTerm = $("#search").val().trim().split(' '); // an array of words searched for

我想要做的是找到一种方法来选择包含所有或部分搜索词的所有'li'元素，但我不确定如何最好地处理它。

目前，我这样做：

var results = $('p:contains("'+ searchTerm[0] +'")');

在第一个词上获得完全匹配，但我想搜索多个词，而不仅仅是一个词。

我想搜索'test hi'并找回三个节点，因为它会搜索'test'和'hi'。我还想到了：

var results2 = $('p').filter(function( index ) {
    return ( this +':contains("'+ searchTerm +'")' );
});

有人指出我正确的方向吗？

Answer 1

你可以用选择器做一些黑魔法，如下所示：

var results = $('p:contains("' + searchTerm.join('"), p:contains("') + '")');

这看起来很难，但我会解释一下。

它将搜索字词加入"), p:contains("。然后，它只是将缺少的p:contains("和")添加到结果字符串的末尾并搜索它。

Answer 2

$.filter和$ .each（或者array.forEach，如果你不关心ie8）的组合也可以在这里使用：

var searchTerms = ["how", "test"];

$('div').filter(function () {
    $text = $(this).text();
    var found = 0;
    $.each(searchTerms, function (index, term) {
        found = $text.indexOf(term) > -1 ? found +1 : found;
    })
    return found;
}).addClass('match');

<强> jsFiddle

jQuery搜索包含多个单词的段落

2 个答案: