I looked at a search filter code code and edited it to catered to my functional needs. I understood most of the JavaScript except the extend method bit. Can someone explain that? Also, is this the best way to create such a filter? Please let me know of any ways to improve the code.
<style type="text/css">
/* Clearfix */
.display{display:block;}
.hidden{display:none;}
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
#brand-search{margin-bottom:10px;clear: both;border:1px solid #ccc;width:200px;}
#brand-search:hover{border:1px solid #666;}
#search-text {float:left;padding:6px;font-size:14px;color:#333;background:#eee;border:0 none;margin:0;outline:0;width:122px;}
.list-count {float:left;text-align:right;width:56px;padding:6px 10px 6px 0;color:#999;background:#eee;}
ul {float:left;width:100%;margin:0;padding:0;position:relative;}
li {float:left;clear:left;width:100%;margin:0;padding:0.5em 0.8em;list-style:none;background-color:#f2f2f2;border:1px solid #f2f2f2;cursor:pointer;color:#333;position:relative;z-index:2;}
li:hover {background-color:#fff;border:1px solid #ccc;}
.empty-item {color:#aaa;padding:0;border:none;text-align:center;float:left;clear:left;display:none;}
</style>
<section class="list-wrap">
<div id="brand-search" class="clearfix">
<input type="text" id="search-text" placeholder="search">
<span class="list-count"></span>
</div>
<ul id="list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>pink</li>
<li>blue</li>
<li>green</li>
<li>violet</li>
<li>purple</li>
<li>Indigo</li>
<li>grey</li>
<li>white</li>
<li>black</li>
<span class="empty-item">No items to show..</span>
</ul>
</section>
<script>
var list = $('#list'),
itemCount = list.find('li').length;
// list current items number
$('.list-count').text(itemCount + ' items');
$("#search-text").keyup(function(){
var searchBrand = $("#search-text").val(),
listItem = list.children('li'),
searchSplit = searchBrand.replace(/ /g, "'):containsi('");
//extends :contains to be case insensitive
$.extend($.expr[':'],{
'containsi': function(elem, i, match, array){
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#list li").not(":containsi('" + searchSplit + "')").each(function(e){
$(this).addClass('hidden');
});
$("#list li:containsi('" + searchSplit + "')").each(function(e){
$(this).removeClass('hidden');
});
//show .empty-item state text when no jobs found
var itemCount = listItem.length - list.find('.hidden').length;
$('.list-count').text(itemCount + ' items');
if(itemCount == '0'){
$('.empty-item').show();
}
else {
$('.empty-item').hide();
}
});
</script>