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


No comments:
Post a Comment