Js SearchBox

by Ankit Patidar

HTML

<h1 id="header">List of countries</h1>
 <ul id="list">
		<li><a href="#">Australia</a></li>
		<li><a href="#">Austria</a></li>
		<li><a href="#">Belgium</a></li>
		<li><a href="#">Brazil</a></li>
		<li><a href="#">Canada</a></li>
		<li><a href="#">Denmark</a></li>
		<li><a href="#">Finland</a></li>
		<li><a href="#">France</a></li>
		<li><a href="#">Germany</a></li>
		<li><a href="#">Greece</a></li>
		<li><a href="#">India</a></li>
        <li><a href="#">Ireland</a></li>
		<li><a href="#">Israel</a></li>
		<li><a href="#">Italy</a></li>
		<li><a href="#">Japan</a></li>
		<li><a href="#">Luxembourg</a></li>
		<li><a href="#">Mexico</a></li>
		<li><a href="#">Netherlands</a></li>
		<li><a href="#">Norway</a></li>
		<li><a href="#">Poland</a></li>
		<li><a href="#">Portugal</a></li>
		<li><a href="#">Russia</a></li>
		<li><a href="#">Spain</a></li>
		<li><a href="#">Sweden</a></li>
		<li><a href="#">Switzerland</a></li>
		<li><a href="#">Turkey</a></li>
		<li><a href="#">United Kingdom</a></li>
		<li><a href="#">United States</a></li>
	</ul>

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