Question

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”。 Backspace应该恢复它。所以基本上它是标准的动态搜索。

缺少的是用于隐藏和显示的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。

Answer 1

请参阅此更新的演示：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);
    });
});

使用搜索动态隐藏div

1 个答案: