Question

我正在尝试创建一个简单的“搜索字段”，它的作用是搜索文本中输入的内容是否与内容中框的任何数据相同，如果是，则隐藏除搜索结果之外的所有内容，类似的（这不起作用）：

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

我也不确定是否应该通过点击按钮来过滤内容，或者发现内容应该在搜索中弹出为可点击的文本，还是应该全部自动发生？最后，我可能需要针对多个data-attr进行检查。

任何？

Answer 1

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

<强> Working sample

根据评论中的演示小提琴示例

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

<强> Working sample

Answer 2

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/

“搜索”字段用于过滤内容

2 个答案:

根据评论中的演示小提琴示例