使用空间时输入过滤器嵌套divs



所以我有一个网页,在此页面上,我需要包括一个过滤器。我查看了一堆过滤器插件,但所有这些插件都没有使用网页构建的方式,因此我决定自己做。到目前为止,我的基本过滤器正常工作,但我无法将其用于姓氏或基本上具有领先空间的任何东西。

例如,如果名称为 Kevin Durst

然后,当我填写时,滤镜显示正确的div: Kevin但是当我填写Durst时,什么也没显示。

这是到目前为止具有代码的小提琴:http://jsfiddle.net/tv9rk/255/

html

<input class="search-individual-items" />
<div class="individual-items">
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">John Hendriks</h5>         
          </div>      
        </div>      
      </div>
    </div>
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">Kate Hendriks</h5>         
          </div>      
        </div>      
      </div>
    </div>
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">Triss Bufon</h5> 
          </div>      
        </div>      
      </div>
    </div>
</div>

JS:

$('.search-individual-items').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');
    $('.individual-items .individual').each(function() {
        var isMatch = exp.test($('.name', this).text());
        $(this).toggle(isMatch);
    });
});

问题

如何更改.js,以便它也允许使用姓氏过滤?

我很高兴看到它在小提琴中工作。

感谢大家的帮助。

您的逻辑很好,但是正则 ^标志使其查看忽略姓氏的字符串的开头。应该是

var value = $(this).val();
var exp = new RegExp(value, 'i');

最新更新