使用搜索动态隐藏div [英] Hiding divs dynamically using a search

问题描述

JSFiddle我迄今为止所做的工作 http://jsfiddle.net/chQ2T/3/

JSFiddle for what I have done so far http://jsfiddle.net/chQ2T/3/

如你所见，我有一些div安排，因此

As you can see, I have some divs arranged thus

<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（每次击球后执行）和div id。所以输入 c 应该隐藏id不包含子串c的所有div，即最后一个。

And there is a search box where I want to dynamically hide and show divs based on the search query (executed after every stroke) and the div id. So typing c should hide all divs where the id does not contain substring "c" i.e. the last one.

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

Typing d after that should hide the additional div abc, since it does not contain the substring "cd". Backspace should restore it. So basically it's a standard dynamic search.

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

What is missing are the Javascript functions for hiding and showing.

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

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

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

I am struggling with restoring the previously hidden divs.

推荐答案

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

See this updated demo: http://jsfiddle.net/chQ2T/4/

hide_divs（）功能稍作修改，先隐藏全部divs然后只展示匹配的那些。

The hide_divs() function has been slightly modified to first hide all divs and then show only those that match.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！