My website showcases a lineup of League of Legends champion icons, with one example shown below:
<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>
My goal is to implement a search bar above these icons that filters out champions as the user types their name. I found a JavaScript snippet for this functionality, but unfortunately, it does not seem to filter the entire "champion" div with all its contents. Here is how the search bar and JavaScript function appear:
<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();
});
Is there a way to modify this code so that it filters out the entire "champion" div along with its contents?