Using jQuery to search in HTML

What are we going to do?

How?

The example HTML structure

<div id="search">
            <input type="text" name="q" />
</div>

        <ul id="content">
            <li>Donec posuere lobortis urna, sit amet adipiscing purus blandit vel.</li>
            <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi.</li>
            <li>Praesent dapibus, neque id cursus faucibus. </li>
            <li>Phasellus ultrices nulla quis nibh. Quisque a lectus.</li>
            <li>Duis tempus turpis in neque sagittis at adipiscing. Nulla congue turpis ac turpis aliquet placerat.</li>
            <li>Pellentesque fermentum dolor.</li>
        </ul>

JS

$(function(){

        /**
        * Fix to disable case-sensitive
        **/
        $.expr[':'].icontains = function(obj, index, meta, stack){
            return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
        };

        $("div#search input[type=text]").keydown(function(e){
            var $input = $(this);
            if($input.val() != ''){
                $('ul#content li').hide();
                $('ul#content li:icontains('+$input.val()+')').show();
            }
        });
    });

Optional CSS

body{
                margin:0;
            }

            div#search{
                background:#ddd;
                border-bottom:1px solid #bbb;
                padding:3px 10px;
            }

            div#search input[type=text]{
                border:1px solid #aaa;
                width:100%;
                font-size:16px;
            }

            ul#content{
                margin:0;
                padding:0;
                list-style:none;
            }

            ul#content li{
                background:#E0EDFF;
                border-bottom:1px solid #BACCE6;
                padding:3px 5px;
            }

Example of use

A good place to use this technique is on a chat list. You'll search all your contacts without refreshing or sending many ajax requests. Just asking your HTML!