SO - 21152899

by DiegoTc

HTML

<input type="text" id="search" placeholder="Type to search">
<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>
<div class = "champion">
    <p>Arun
        <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>
<div class = "champion">
    <p>John
        <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>
<div class = "champion">
    <p>Joseph Thomas
        <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

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