Question

我有一个网站，连续显示冠军联盟的联盟图标。其中一个看起来像这样：

<div class = "champion">
 <p>Aatrox
  <img class = "face_left" src = "images/small/Aatrox.png">
  <div class = "name" onmouseover="if(champ1=='') preview1('Aatrox', 'Aatrox')" onmouseout="if(champ1=='')restoreAvatar1()" onClick="champ1 = 'Aatrox'; preview1('Aatrox', 'Aatrox')">
  </div>
  </p>
</div>

我希望在他们上面有一个搜索栏，当你开始输入冠军的名字时，它会自动开始过滤掉那些不适合被搜索的冠军。现在，我确实找到了这个Javascript片段，我确实搞砸了它，并让它在更简单的场景中工作，我只是在里面有一个div和ap标签，但由于某些原因所有这些div它不想过滤任何东西。这就是搜索栏和JS的样子：

<input type="text" id="search" placeholder="Type to search">

var $rows = $('.champion p');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

有没有办法让这段代码过滤掉整个“冠军”div中的内容？

Answer 1

尝试

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

jQuery(function(){
    var $rows = $('.champion');
    $('#search').keyup(function () {
        var regex =  new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i')
        $rows.hide().filter(function () {
            var text = $(this).text().replace(/\s+/g, ' ');
            return regex.test(text)
        }).show();
    });
});

演示：Fiddle

如何使用Javascript创建自动搜索过滤器？

1 个答案: