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

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