NEW Filter List

Search engine type script

HTML

<form class="filterform" action="#">
    <input class="filterinput" type="text">
</form>
    
    <ul id="list">
        <li><a href="#/australia/">Australia</a></li>
        <li><a href="#/austria/">Austria</a></li>
        <li><a href="#/belgium/">Belgium</a></li>
        <li><a href="#/brazil/">Brazil</a></li>
        <li><a href="#/canada/">Canada</a></li>
        <li><a href="#/denmark/">Denmark</a></li>
        <li><a href="#/finland/">Finland</a></li>
        <li><a href="#/france/">France</a></li>
        <li><a href="#/germany/">Germany</a></li>
        <li><a href="#/greece/">Greece</a></li>
        <li><a href="#/ireland/">Ireland</a></li>
        <li><a href="#/israel/">Israel</a></li>
        <li><a href="#/italy/">Italy</a></li>
        <li><a href="#/japan/">Japan</a></li>
        <li><a href="#/luxembourg/">Luxembourg</a></li>
        <li><a href="#/mexico/">Mexico</a></li>
        <li><a href="#/netherlands/">Netherlands</a></li>
        <li><a href="#/norway/">Norway</a></li>
        <li><a href="#/poland/">Poland</a></li>
        <li><a href="#/portugal/">Portugal</a></li>
        <li><a href="#/russia/">Russia</a></li>
        <li><a href="#/spain/">Spain</a></li>
        <li><a href="#/sweden/">Sweden</a></li>
        <li><a href="#/switzerland/">Switzerland</a></li>
        <li><a href="#/turkey/">Turkey</a></li>
        <li><a href="#/united-kingdom/">United Kingdom</a></li>
        <li><a href="#/united-states/">United States</a></li>
    </ul>

CSS

body {font:14px/18px segoe UI, tahoma, arial;}

a {
    text-decoration:none;
    color:#0099ff;
}

JavaScript

(function($) {

    $('.filterinput').keyup(function() {
        var a = $(this).val();
        if (a.length > 0) {
            // this finds all links in the list that contain the input,
            // and hide the ones not containing the input while showing the ones that do
            var containing = $('#list li').filter(function () {
                var regex = new RegExp('\\b' + a, 'i');
                return regex.test($('a', this).text());
            }).slideDown();
            $('#list li').not(containing).slideUp();
        } else {
            $('#list li').slideDown();
        }
        return false;
    })

}(jQuery));




















// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};