Tuesday, July 20, 2010

Usando jQuery para procurar no HTML

O que vamos fazer?


Como?


A estrutura HTML do exemplo
<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 para desabilitar o 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();
            }
        });
    });

CSS Opcional
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;
            }

Exemplo de uso

Um bom lugar parar usar esta técnica é numa lista de contatos de um chat, por exemplo. Você irá procurar automaticamente sem precisar atualizar ou enviar muitas requisições ajax. Apenas pergunte ao seu HTML! (:

No comments:

Post a Comment