Jquery 根据textbox的输入动态显示/隐藏div

我在一个网站上工作， 我有一个页面，其中包含一个如下所示的人员列表：

<div class="personsMenu">
    <div class="person">
        <div class="name">John</div>
        <div class="age">18</div>
    </div>
    <div class="person">
        <div class="name">Kate</div>
        <div class="age">24</div>
    </div>
    <div class="person">
        <div class="name">Tom</div>
        <div class="age">17</div>
    </div>
</div>

约翰
18
凯特
24
汤姆
17

我还有一个文本框

使用jquery，我需要执行以下操作：

当用户开始在文本框中键入“name”不包含字符的div时，该div将消失（某种动态过滤器，您只会看到姓名中包含书写字符的人员）

所以逻辑应该是这样的：

<div class="personsMenu">
    <div class="person">
        <div class="name">John</div>
        <div class="age">18</div>
    </div>
    <div class="person">
        <div class="name">Kate</div>
        <div class="age">24</div>
    </div>
    <div class="person">
        <div class="name">Tom</div>
        <div class="age">17</div>
    </div>
</div>

当用户在文本框中键入一个字符（或删除一个）时，我们循环遍历所有“person”div，如果该“person”中的“name”div包含字符，我们将显示它，否则我们将隐藏它（.show（）和.hide（）在jquery中）

当然，如果文本框是空的，我们会显示所有内容

这能做到吗

---

谢谢你的帮助，因为你用jQuery标记了它，我强烈推荐他们的。我已经在几个项目中使用过它，您可以更新搜索功能以使用这样的本地数据存储。作为一个旁注，您可能需要考虑使用<代码> UL> <代码>和<代码>

<代码>…

。 代码示例

//Search-As-You-Type
$(id).find('input').autocomplete({
    minLength: 2,
    focus: function( event, ui ) {},
    select: function( event, ui ) {},
    source: function(request, response){
        //here is where you want to call your custom function
        findSite(request.term);             
    }
});

---

<>这是一个你应该考虑使用和创建的脚本。您还应该使用

和

(function($){
    $.tzFilter = function(jq, phrase, type, column, ifHidden){
        var new_hidden = false;
        if(this.last_phrase === phrase){
            return false;
        }

        if(!type){
            type = 'ul';
        }

        var phrase_length = phrase.length;
        var words = phrase.toLowerCase().split(' ');

        var matches = function(elem){
            elem.show()
        }
        var noMatch = function(elem){
            elem.hide();
            new_hidden = true
        }
        var getText = function(elem){
            return elem.text()
        }

        if(column){
            var index = null;
            if(type == 'table'){
                jq.find('thead > tr:last > th').each( function(i){
                    if( $.trim($(this).text()) == column ){
                        index = i; return false;
                    }
                });
            } else if (type == 'ul'){
                jq.find("li").each(function(i){
                    if(!$(this).attr('display', 'none')){
                        if( $.trim($(this).text()) == column ){
                        index = i; return false;
                        }
                    }
                });
            }

            if(index == null){
                throw('Index non trouvée: ' + column + '')
            }

            if(type == 'table'){
                getText = function(elem){
                    return jQuery(elem.find(('td:eq(' + index + ')')  )).text();
                }
            } else if (type == 'ul') {
                getText = function(elem){
                    return jQuery(elem.find(('"li:eq(' + index + ')')  )).text();
                }
            }
        }

        // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau
        if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){
            if(phrase[-1] === ' '){
                this.last_phrase = phrase;
                return false;
            }

            // On va chercher uniquement pour le nouveau mot
            var words = words[-1];

            // On cache uniquement les tables visibles
            matches = function(elem) {;}

            if(type == 'table'){
                var elems = jq.find('tbody > tr:visible');
            } else if (type == 'ul'){
                var elems = jq.find('li:visible');
            }
        } else {
            new_hidden = true;

            if(type == 'table'){
                var elems = jq.find('tbody > tr')
            } else if (type == 'ul') {
                var elems = jq.find('li')
            }
        }


        elems.each(function(){
            var elem = $(this);
            $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem);
        });

        last_phrase = phrase;

        if(ifHidden && new_hidden){
            ifHidden();
        }
        return jq;
    };

    // On cache pour accélérer le tout
    $.tzFilter.last_phrase = ""

    $.tzFilter.has_words = function(str, words, caseSensitive){
        var text = caseSensitive ? str : str.toLowerCase();
        for (var i=0; i < words.length; i++){
            if(text.indexOf(words[i]) === -1){
                return false;
            }
        }
        return true;
    }
})(jQuery);

（函数（$）{
$.tzFilter=函数（jq、短语、类型、列、ifHidden）{
var new_hidden=false；
if（this.last_短语===短语）{
返回false；
}
如果（！类型）{
类型='ul'；
}
var phrase_length=phrase.length；
var words=phrase.toLowerCase（）.split（“”）；
变量匹配=函数（元素）{
元素show（）
}
var noMatch=功能（要素）{
隐藏元素（）；
new_hidden=true
}
var getText=函数（elem）{
返回元素text（）
}
如果（列）{
var指数=零；
如果（类型==‘表’）{
jq.find（'thead>tr:last>th'）。每个（函数（i）{
if（$.trim（$（this）.text（））==列）{
索引=i；返回false；
}
});
}else if（类型='ul'）{
jq.查找（“li”）。每个功能（i）{
if（！$（this.attr（'display'，'none'））{
if（$.trim（$（this）.text（））==列）{
索引=i；返回false；
}
}
});
}
如果（索引==null）{
抛出（'Index non-trouveée:'+列+''）
}
如果（类型==‘表’）{
getText=函数（elem）{
返回jQuery（elem.find（'td:eq（'+index+'）））.text（）；
}
}else if（类型='ul'）{
getText=函数（elem）{
返回jQuery（elem.find（“”li:eq（“+index+”）））.text（）；
}
}
}
//在一个简单的故事里，在一个新的口号里，无德文主义者在新的口号里
if（（words.size>1）和&（phrase.substr（0，phrase\u length-1）==这个.last\u短语））{
如果（短语[-1]=''）{
this.last_phrase=短语；
返回false；
}
//关于瓦切彻新运动联合会
变量词=词[-1]；
//关于缓存唯一表的访问
匹配=函数（元素）{；}
如果（类型==‘表’）{
var elems=jq.find（'tbody>tr:visible'）；
}else if（类型='ul'）{
var elems=jq.find（'li:visible'）；
}
}否则{
new_hidden=true；
如果（类型==‘表’）{
var elems=jq.find（'tbody>tr'）
}else if（类型='ul'）{
var elems=jq.find（'li'）
}
}
每个元素（函数（）{
var elem=$（本）；
$.tzFilter.has_单词（getText（elem），单词，false）？匹配（elem）：noMatch（elem）；
});
最后一个短语=短语；
如果（如果隐藏&新建隐藏）{
ifHidden（）；
}
返回jq；
};
//关于cache pour accélérer le tout
$.tzFilter.last_phrase=“”
$.tzFilter.has_words=函数（str，words，区分大小写）{
var text=区分大小写？str:str.toLowerCase（）；
for（var i=0；i

这里有一些东西可以让您开始。我相信这还远远不够完美，但您还没有展示您已经尝试过的内容以及您的问题中出现的问题

$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".person").show().filter(function () {
        return $(".name", this).text().indexOf(search) < 0;
    }).hide();        
});​​​​​​​​​​​​​

$（“#filterTextBox”）。在（“键控”，函数（）{
var search=this.value；
$（“.person”）.show（）.filter（函数（）{
返回$（“.name”，this.text（）.indexOf（search）<0；
}).hide（）；
});​​​​​​​​​​​​​

---

这里有一个。

在每次击键时，您可以

.toggle（）

每个

.person

，传递一个变量，指示它是否与当前值匹配，因此应该显示

$('.my-textbox').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');

    $('.personsMenu .person').each(function() {
        var isMatch = exp.test($('.name', this).text());
        $(this).toggle(isMatch);
    });
});​

根据需要修改表达式。在此版本中，它会检查名称是否以输入的值开头，并忽略大小写

---

最近我需要这类工作，我找到了一个很好的解决方案。请参阅此代码搜索整个字符串

$( '#input-text' ).keyup( function () {
    var value = $( this ).val();
   $( '#filter-parant > .filter-div' ).each( function () {
        $('.filter-div:contains("' + value + '")').show();
        $('.filter-div:not(:contains("' + value + '"))').hide();

    } );
} );

---

我希望这将对您有所帮助

是的，这是可以做到的，到目前为止您用jQuery做了哪些尝试（您有什么代码）？如何通过同时检查这些元素的子元素来实现这一点？但是，只隐藏整个框。因此，如果div中有标记，它会搜索