javascript - "search"字段过滤内容

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>

j查询:

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

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

我也不确定是否应该通过单击按钮来过滤内容，或者找到的内容应该作为可点击的文本在搜索中弹出，还是应该全部自动发生？最后，我可能不得不根据多个数据属性对其进行检查。

有人吗？

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

根据评论中的demo fiddle示例

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