问题

Question

所以我有一个网页，在这个页面上我需要包含一个过滤器。我查看了一大堆过滤器插件，但所有这些都没有按照网页的构建方式工作，所以我决定自己做。到目前为止，我有一个基本的过滤器工作，但我不能用于姓氏或基本上任何有领先空间的东西。

例如，如果名称是 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以便它还允许使用姓氏进行过滤？

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

感谢大家的帮助。

Answer 1

你的逻辑很好，但正则表达式中的^标志使它看到忽略姓氏的字符串的开头。应该是

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

使用空格时输入过滤器嵌套div

问题

1 个答案: