Quick List Sort by key entry

by Reusablecode

HTML

<head> 
    <meta charset="UTF-8"> 
    <title>Simple list filter</title> 
    <link href="http://github.com/Kilian/sencss/raw/master/source/sen.css" rel="stylesheet" type="text/css"> 
    
</head> 
<body> 
    <div id="wrap"> 
        <h1 id="header">List of countries</h1> 
        <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> 
        <p><a href="http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/">Back to blogpost on kilianvalkhof.com</a></p> 
    </div> 
   ...

CSS

body {
    background:#fff
        font-size:13px;
}
#wrap {
    position:relative;
    width:220px;
    margin:50px auto 0;
}
#header{position:relative;line-height:1em;}
.filterform {
    width:220px;
    font-size:12px;
    display:block;
}
.filterform input {
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
}

JavaScript

(function ($) {
    // 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;
    };
    
    
    function listFilter(header, list) { // header is any element, list is an unordered list
        // create and add the filter form to the header
        var form = $("<form>").attr({"class":"filterform","action":"#"}),
            input = $("<input>").attr({"class":"filterinput","type":"text"});
        $(form).append(input).appendTo(header);
        
        $(input)
            .change( function () {
                var filter = $(this).val();
                if(filter) {
                    // this finds all links in a list that contain the input,
                    // and hide the ones not containing the input while showing the ones that do
                    $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
                    $(list).find("a:Contains(" + filter + ")").parent().slideDown();
                } else {
                    $(list).find("li").slideDown();
                }
                return false;
            })
            .keyup( function () {
                // fire the above change event after every letter
                $(this).change();
            });
    }
    
    
    //ondomready
    $(function () {
        listFilter($("#header"), $("#list"));
    });
}(jQuery));