2

私は単純な「検索フィールド」を作成しようとしています。テキストで入力したものがコンテンツ内のボックスのデータ属性と等しいかどうかを検索し、そうである場合は、見つかったもの以外のすべてを非表示にします（これは動作していません）：

css：

.filter-div {
    display: none;
}

html：

    <label for="search">Search Input:</label>
    <input type="search" name="filter" id="search" value="" />
    <div class="filter-div" data-filter="one">one</div>
    <div class="filter-div" data-filter="two">two</div>
    <div class="filter-div" data-filter="three">three</div>
    <div class="filter-div" data-filter="four">four</div>
    <div class="filter-div" data-filter="five">five</div>

jquery：

    // save the default value on page load
    var filter = $('.input').val();

    // on submit, compare
    if ( $('.input').val() = $("data-filter") {
         $(this).show();
    } ​

また、コンテンツをボタンクリックでフィルタリングする必要があるのか​​、見つかったコンテンツを検索でクリック可能なテキストとしてポップアップ表示するのか、それともすべて自動で実行するのかがわかりません。最後に、おそらく私はそれを複数のデータ属性に対してチェックする必要があります。

誰？

4

2 に答える 2

4 
$('#search').on('keyup', function() {
    var val = $.trim(this.value);
    if (val) {
        $('div[data-filter=' + val + ']').show();
    } else $('div[data-filter]').hide();
});

作業サンプル

コメントのデモフィドルの例によると

var divs = $('div[data-filter]');
$('#search').on('keyup', function() {
    var val = $.trim(this.value);
    divs.hide();
    divs.filter(function() {
        return $(this).data('filter').search(val) >= 0
    }).show();
});

divs.on('click', function() {
    divs.not(this).hide();
    var text = $.trim($(this).text());
    $('#search').val(text);
});

作業サンプル

于 2012-06-26T07:33:53.853 に答える
1

JavaScript：

var filter_div = $('[data-filter]');
$('#search').keyup(function(){
    var val = $.trim(this.value);
    filter_div.hide();
    if(val.length == 0) return;
    filter_div.filter(function(){            
        return $(this).data('filter').indexOf(val)>-1
    }).show();

});

フィドル： http： //jsfiddle.net/iambriansreed/xMwS5/

</ p>

于 2012-06-26T07:44:39.383 に答える