我正在一个网站上工作,
我有一个页面,其中包含这样构建的人员列表：
我有一个页面,其中包含这样构建的人员列表：
<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