jquery - 使用 "AND"方法设置多项过滤器

Question

我想设置一个 jQuery 多术语过滤器，使用 AND 方法。
例如，搜索 foo bar 或 foo+bar 将返回包含 both foo 和 的项目bar 字符串的值，但不是那些只有 foo 或 bar 的字符串。

现在，我使用这段代码:

$('#filter').keyup(function(ev) {
    $('div').show();
    if($(this).val() != '') {
        var terms = $(this).val().toLowerCase().split(/[\s+]+/); 
        $('div').hide()
        for (var i = 0, n = terms.length; i < n; i++) {
            $('div[data-search*="'+terms[i]+'"]').show();
        };
    }
});

// "nihil"       returns 2 results
// "nulla"       returns 1 result
// "nihil nulla" returns 3 results

div {
    border: 1px solid black;
    margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Filter">

<div data-search="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel mollitia recusandae porro quidem optio expedita veritatis aliquid debitis explicabo incidunt odit beatae laboriosam rem amet quis corporis assumenda rerum ab!">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel mollitia recusandae porro quidem optio expedita veritatis aliquid debitis explicabo incidunt odit beatae laboriosam rem amet quis corporis assumenda rerum ab!</div>
<div data-search="Eligendi quasi maxime accusantium vel alias nihil dolorum enim maiores aspernatur ab cumque iusto exercitationem dicta deleniti qui ipsa perferendis doloremque non quod itaque earum at sunt. A consequatur in.">Eligendi quasi maxime accusantium vel alias nihil dolorum enim maiores aspernatur ab cumque iusto exercitationem dicta deleniti qui ipsa perferendis doloremque non quod itaque earum at sunt. A consequatur in.</div>
<div data-search="Rerum ratione temporibus nulla dolorem cum minus dolores eius quia natus pariatur. Non nisi sunt iusto officiis ipsa adipisci illo enim ratione repudiandae sint iure repellat tempore est ea omnis.">Rerum ratione temporibus nulla dolorem cum minus dolores eius quia natus pariatur. Non nisi sunt iusto officiis ipsa adipisci illo enim ratione repudiandae sint iure repellat tempore est ea omnis.</div>
<div data-search="Quos nihil alias ipsam voluptates eius itaque tempora sapiente natus odio nobis possimus voluptate! Aspernatur ea molestiae dolor voluptatem beatae vel rerum adipisci minima maiores at a alias maxime eos.">Quos nihil alias ipsam voluptates eius itaque tempora sapiente natus odio nobis possimus voluptate! Aspernatur ea molestiae dolor voluptatem beatae vel rerum adipisci minima maiores at a alias maxime eos.</div>
<div data-search="Incidunt nobis harum quasi voluptas sed quo qui repellendus tempore architecto. Maxime aliquid officia similique culpa molestiae nobis incidunt praesentium ducimus sunt necessitatibus veritatis iusto quis esse vitae hic perferendis.">Incidunt nobis harum quasi voluptas sed quo qui repellendus tempore architecto. Maxime aliquid officia similique culpa molestiae nobis incidunt praesentium ducimus sunt necessitatibus veritatis iusto quis esse vitae hic perferendis.</div>

你可以清楚地看到这是使用 OR 方法，然后搜索 foo bar 也将返回仅包含 foo 或 的结果>栏。如何将此 OR 方法更改为 AND 方法？

请注意我的主要问题是这些术语的顺序可能不同于搜索字段的顺序。

感谢您的帮助。

Answer 1

您可以连接一个字符串作为选择器:

$('#filter').keyup(function(ev) {
    $('div').show();
    if($(this).val() != '') {
        var terms = $(this).val().toLowerCase().split(/[\s+]+/); 
        $('div').hide()
        var selector = "div";
        for (var i = 0, n = terms.length; i < n; i++) {
            selector += '[data-search*="'+terms[i]+'"]';
        };
        $(selector).show();
    }
});

DEMO