jquery – 根据文本框的输入动态显示/隐藏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>

我还有一个文本框< input type =“Text”id =“filterTextBox”/>

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

当用户开始在文本框中键入时,“name”不包含字符的div消失(某种动态过滤器,您只看到名字中包含书写字符的人)

所以逻辑应该是这样的：

当用户在文本框中键入一个字符(或删除一个字符)时,我们遍历所有“person”div,如果“person”中的“name”div包含我们显示的字符,否则我们隐藏它(.show( )和jquery中的.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);
    });
});​

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

Demo