2

次のような jQuery/HTML セレクターを使用してデータをフィルター処理しようとしています

$("li[data-filter*='keyword']")

しかし、これは「keyword1 keyword2」と「keyword2 keyword1 」をフィルタリングして同じ結果を得ることができません。

デモをします..

HTML :

<input>

<li data-filter="apple pie gummi bears gummi bears john">
    Apple pie gummi bears gummi bears John
</li>

<li data-filter="oat cake chocolate bar chupa chups dessert tootsie">
    Oat cake chocolate bar chupa chups dessert tootsie
</li>
<li data-filter="jujubes cookie sugar plum lemon drops candy">
    Jujubes cookie sugar plum lemon drops candy
</li>

jQuery :

var filter_timer;
$("input").keypress(function() {
    clearTimeout(filter_timer);
    filter_timer=setTimeout(function(){
        filter();
    },500);
});

function filter() {

var keyword = $("input").val();

if($("li[data-filter*='"+keyword+"']").length) {
    $("li").animate({opacity:0.4}).css({"text-decoration":"line-through"});
    $("li[data-filter*='"+keyword+"']").animate({opacity:1}).css({"text-decoration":"blink"});
}else{
    $("li").animate({opacity:1},function(){$("li").removeAttr("style")});}
}

プレイグラウンド: http://jsfiddle.net/9eaXD/

アップルパイとパイアップルまたはアップルグミペイを検索すると、どうすれば同じ結果を得ることができますか

4

1 に答える 1

3

あなたがやろうとしていることは、属性セレクターでは達成できません。stringを正確に含む属性[data-filter*="apple pie"]を持つ要素のみに一致します。data-filterapple pie

.filter()代わりに次を使用する必要があります。

$("input").keypress(function() {
    var keywords = $(this).val().split(' ');

    $('li').removeClass('matched');
    $("li[data-filter]").filter(function() {
        var filters = $(this).data('filter').split(' ');

        for (var i = 0; i < keywords.length; i++) {
            var keyword = keywords[i];

            if (filters.indexOf(keyword) == -1) {
                return false;
            }
        }

        return true;
    }).addClass('matched');
});​

デモ: http://jsfiddle.net/9eaXD/8/

filtersページの読み込み時に各要素の配列を作成することで、これをもう少し最適化できます。

$("li[data-filter]").filter(function() {
    var $this = $(this);

    $this.data('filter', $this.data('filter').split(' '));
});
于 2012-12-17T08:40:46.137 に答える