"data-"要素で複数の値を検索できますか？

Question

私は、データ属性が一致するdivだけが表示されるように、入力時にdivをフィルタリングする簡単な検索入力を持っています。

これはうまくいきますが、完全一致のみを返します。たとえば、下のスニペットでは「apple」は検索できますが、「apple california」は適切なdivを表示しません（データ属性には両方の値が含まれています）。私はこれが正確な一致を探すことしかないからだと思う。

"data-"要素で複数の値を検索するにはどうすればよいですか？理想的には私は「近い」「それはで」「および」などの一般的な単語を無視したいのですがそのようの検索：カリフォルニア近いカリフォルニアで

アップルまたはiphone

だろうまだアップル部門を示しています。

アドバイスをいただければ幸いです。ここでは抜粋です：

$('[data-search]').on('keyup', function() { 
 
    var searchVal = $(this).val(); 
 
    var filterItems = $('[data-filter-item]'); 
 

 
    if (searchVal != '') { 
 
    filterItems.addClass('hidden'); 
 
    $('[data-filter-item][data-filter-name*="' + searchVal.toLowerCase() + '"]').removeClass('hidden'); 
 
    } else { 
 
    filterItems.removeClass('hidden'); 
 
    } 
 
});

* { 
 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
input { 
 
    background: #cdcdcd; 
 
    border: none; 
 
    padding: 14px 20px; 
 
} 
 

 
.items { 
 
    margin-top: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="search"> 
 
    <input type="text" placeholder="search" data-search /> 
 
    </div> 
 
    <div class="items"> 
 
    <div data-filter-item data-filter-name="apple+iphone+california">Apple</div> 
 
    <div data-filter-item data-filter-name="google+nexus">Google</div> 
 
    <div data-filter-item data-filter-name="microsoft">Microsoft</div> 
 
    </div> 
 
</div>

Answer 1

あなただけのすべてのアイテムを取得し、文字列内の文字列の存在を確認するために、各項目のデータにstring.indexOfを使用することができます。

$('[data-filter-item][data-filter-name]').each(function(element){ 
    var isPresent = $(this).data('filter-name').indexOf(searchVal.toLowerCase()) > -1; 
    if(isPresent){ 
    // do something 
    } else { 
    // do something else 
    } 
});