JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="row-fluid">
				<div class="span12">
                    <div class="green-bar"><h4><center>Directory</center></h4></div>
				</div>
			</div>
			</br></br>
			
			<div class="span4">
				<div id="name-dir">
					<div class="row">
						<div class="control-group">
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-search"></i></span>
									<input class="block search-field" id="inputIcon" type="text" placeholder="Search">
								</div>
							</div>
						</div>
					</div>
					</br>
					<div class="contact-list">
						<div class="contact-gray-bar">A</div>
							<ul class="contact">
								<!-- insert records here -->
								<li>Apple</li>
								<li>Amethyst</li>
								<li>Aratilis</li>
							</ul>							
						<div class="contact-gray-bar">B</div>
							<ul class="contact">
								<!-- insert records here -->
								<li>Banana</li>
								<li></li>
							</ul>
						<div class="contact-gray-bar">C</div>
							<ul class="contact">
								<!-- insert records here -->
								<li>Cross</li>
								
							</ul>
						</br>
					</div>
				</div>
				
					</div>
				</div>
			</div>
			</br> 
		</div>

CSS

.contact-list {
margin-right: 25px;
margin-left: -23px;
height: 350px;
overflow-y: auto;
border: 1px solid #d6d6d6;
}

#name-dir {
margin-top: 10px;
margin-left: 25px;
border-right: 1px dashed #D6D6D6;
height: 450px;
}

.contact-gray-bar {
width: auto;
height: 20px;
border: 1px solid #C0C0C0;
background-color: #C0C0C0;
margin: 0px 0px 0px 0px;
text-align: left;
font-size: 20px;
color: #000000;
padding: 5px 0px 5px 10px;
}

.highlight{background-color:yellow;}

JavaScript

$(function() {
    $('.search-field').on('keyup blur change', function() {
        var text_s = $(this).val();
        
        $("li").removeClass("highlight");
        
        if (text_s.length > 0){
            $("li").each(function(){
                var li_value = $(this).text();
                if (li_value.indexOf(text_s) >= 0){
                    $(this).addClass("highlight");
                }
            });
        }
    });
});