Set a multi-term filter using "AND" method

Question

I would like to set a jQuery multi-term filter, using AND method.
For example, searching for foo bar, or foo+bar will return items with both foo and bar strings in their value, but not those with only foo or bar.

Right now, I use this code:

$('#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>

You can clearly see this is working with OR method, then searching for foo bar will also return results with only foo or bar. How can I change this OR method into a AND one ?

Please note my main problem is that the terms can be in an other order than the search field's one.

Thanks for your help.

Answer 1

You could concatenate a string as selector:

$('#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