根据文本框的输入动态显示/隐藏div

Question

我正在一个网站上工作,我有一个页面,其中包含这样构建的人员列表:

<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())

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

可以这样做吗？

谢谢你的帮助

Answer 1

在每一个按键,你可以.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);
    });
});?

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

演示