如何使用Javascript进行自动搜索过滤？

user1895377 发表于 Dev

用户名

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

<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？

阿伦·约翰尼

尝试

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