JSFiddle - React, Tailwind, and code Playground
HTML
<div class="select-outer-container">
<h1 class="muted" id="type">Teachers</h1>
<div class="search-container">
<form class="form-search form-inline">
<input type="text" class="input-medium search-query" placeholder="Search">
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
<div class="row-fluid">
<div class="teachers">
<div class="span12">
<div class="scroll transparent">
<div class="staff-outer-container">
<div class="staff-container">
<div class="staff">
<div class="staff-picture"> <a href="http://ahmedmathematics.weebly.com/index.html" target="_blank"><img src="img/people/teachers/ahmed.png" alt="" /></a>
</div>
<p><span class="bold">Mr. Ahmed</span>
<br />Ext. 13417
<br />Room 417/323
<br /> <a href="mailto:ahmed@wcskids.net">ahmed@wcskids.net</a>
</p>
</div>
</div>
<div class="staff-container">
<div class="staff">
<div class="staff-picture"> <a href="http://yassowarrenmott.weebly.com/" target="_blank"><img src="img/people/teachers/yasso.png" alt="" /></a>
</div>
<p><span class="bold">Mr. Yasso</span>
<br />Ext. 13418
<br />Room 418
<br /> <a href="mailto:yasso@wcskids.net">yasso@wcskids.net</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.staff-container .bold').each(function(){
var $this = $(this);
if($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.staff-container').fadeOut();
else $this.closest('div.staff-container').fadeIn();
});
});
/* just for test purpose */
$('img').attr('src','http://icons.iconarchive.com/icons/artua/dragon-soft/256/User-icon.png');