Filter by Search

by point71echo

HTML

<input placeholder="Search Me" id="box" type="text" />

<ul class="navList">
    <li>apples</li>
    <li>apricots</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>


		<div class="connect-cat" catname="apples" style="visibility: visible; display: block;">
			<a href="/connect/apples">
				<div style="padding:5px;cursor:pointer;">
					<div>
						<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples">
					</div>
					<span>apples</span>
				</div>
			</a>
		</div>

		
		
		<div class="connect-cat" catname="apricots" style="visibility: visible; display: block;">
			<a href="/connect/apricots">
				<div style="padding:5px;cursor:pointer;">
					<div>
						<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots">
					</div>
					<span>apricots</span>
				</div>
			</a>
		</div>

		
		
		<div class="connect-cat" catname="acai" style="visibility: visible; display: block;">
			<a href="/connect/acai">
				<div style="padding:5px;cursor:pointer;">
					<div>
						<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="acai">
					</div>
					<span>acai</span>
				</div>
			</a>
		</div>		
		
		<div class="connect-cat" catname="blueberry" style="visibility: visible; display: block;">
			<a href="/connect/blueberry">
				<div style="padding:5px;cursor:pointer;">
					<div>
						<img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="blueberry">
					</div>
					<span>blueberry</span>
				</div>
			</a>
		</div>
            
		<div class="connect-cat" catname="bananas" style="visibility: visible; display: block;">
			<a...

CSS

div.connect-cat {
float: left;
width: 125px;
height: 110px;
overflow: hidden;
margin: 0 16px 20px 16px;
border: 1px solid #ffffff;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

div.connect-cat:hover {
border: 1px solid #dedede;
-webkit-background-clip: padding-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 4px 12px 0px, rgba(255, 255, 255, 0.496094) 0px 1px 0px 0px inset;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 4px 12px 0px, rgba(255, 255, 255, 0.496094) 0px 1px 0px 0px inset;
background-clip: padding-box;
}

JavaScript

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});