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 回答