Filter by Search

by Jamen Marz

HTML

<input placeholder="Search Me" id="box" type="text" />
<div style="clear:both;"></div>


		<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 class="name">apples</span>
                        <p class="category">fruit</p>
				</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 class="name">apricots</span>
                        <p class="category">fruit</p>
				</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 class="name">acai</span>
                        <p class="category">fruit</p>
				</div>
			</a>
		</div>	
            
		<div class="connect-cat" catname="beet" style="visibility: visible; display: block;">
			<a href="/connect/beet">
				<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="beet">
					</div>
					<span class="name">beet</span>
                        <p class="category">vegetable</p>
				</div>
			</a>
		</div>
		
		<div class="connect-cat"...

CSS

div.connect-cat {
float: left;
width: 125px;
height: 130px;
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;
}

#box{
    margin:20px;
}
}

JavaScript

$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('.connect-cat').show().not(function(){
      return matcher.test($(this).find('.name, .category').text())
  }).hide();
});