1

JSFiddle 我到目前为止所做的事情http://jsfiddle.net/chQ2T/3/

正如你所看到的，我有一些这样安排的div

<div id = "container">
    <div id = "abc" class = "box">
        ABC        
    </div>
    <div id = "cde" class = "box">
        CDE
    </div>
    <div id = "efg" class = "box">
        EFG
    </div>    
</div>

还有一个搜索框，我想根据搜索查询（在每次笔划后执行）和 div id 动态隐藏和显示 div。因此，键入c应该隐藏所有 id 不包含子字符串“c”的 div，即最后一个。

之后键入d应该隐藏额外的 div abc，因为它不包含子字符串“cd”。退格应该恢复它。所以基本上这是一个标准的动态搜索。

缺少的是用于隐藏和显示的 Javascript 函数。

function hide_divs(search) {
    $("#container").not("#"+search).hide();
}

$(document).ready(function() {
    $("#search_field").keyup(function() {
        var search = $.trim(this.value);
            hide_divs(search);
    });
});

我正在努力恢复以前隐藏的 div。

4

1 回答 1

3

请参阅此更新的演示：http: //jsfiddle.net/chQ2T/4/

该hide_divs()功能已稍作修改，以首先隐藏所有 div，然后仅显示匹配的那些。

function hide_divs(search) {
    $("#container > div").hide(); // hide all divs
    $('#container > div[id*="'+search+'"]').show(); // show the ones that match
}

$(document).ready(function() {
    $("#search_field").keyup(function() {
        var search = $.trim(this.value);
        hide_divs(search);
    });
});
于 2013-04-04T09:25:40.770 回答