3

メソッドを使用してAND、jQuery マルチターム フィルターを設定したいと思います。
たとえばfoo bar、 またはを検索すると、値にと文字列の両方foo+barが含まれるアイテムが返されますが、またはのみが含まれるアイテムは返されません。 foobarfoobar

現在、私はこのコードを使用しています：

$('#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のみで結果が返されます。このメソッドをメソッドに変更するにはどうすればよいですか?foobarORAND

私の主な問題は、用語が検索フィールドの順序とは異なる順序になる可能性があることです。

ご協力いただきありがとうございます。

4

1 に答える 1

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();
    }
});

デモ

于 2013-09-17T17:17:06.597 に答える