<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div style="color:black;background-color:white;">
<h3>JQuery Text Search</h3>
</div>
<p style="text-align:center;">
<input type="text" id="filtersearch" value="" placeholder="Enter Text to Search" />
</p>
<ul id="list">
<li>Apple</li>
<li>Banana</li>
<li>Burger</li>
<li>Cake</li>
<li>Cheeseburger</li>
<li>French Fries</li>
<li>Ham</li>
<li>Pizza</li>
</ul>
</div>
</body>
</html>
// Code goes here
$(document).ready(function(){
$('input#filtersearch').bind('keyup change', function () {
if ($(this).val().trim().length !== 0) {
$('#list li').show().hide().each(function () {
if ($(this).is(':icontains(' + $('input#filtersearch').val() + ')'))
$(this).show();
});
}
else {
$('#list li').show().hide().each(function () {
$(this).show();
});
}
});
$.expr[':'].icontains = function (obj, index, meta, stack) {
return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};
});
body{
color:white;
background-color:black;
font-family:Arial;
}
#wrapper{
-webkit-border-radius: 1px;
-webkit-border-bottom-right-radius: 13px;
-webkit-border-bottom-left-radius: 13px;
-moz-border-radius: 1px;
-moz-border-radius-bottomright: 13px;
-moz-border-radius-bottomleft: 13px;
border-radius: 1px;
border-bottom-right-radius: 13px;
border-bottom-left-radius: 13px;
border: 1px solid #FFF;
width: 200px;
margin-left:auto;
margin-right:auto;
margin-top: 70px;
min-height:300px;
}
#list{
list-style:none;
margin: 0;
padding: 0;
text-align:center;
}
#list li:hover{
background-color:#e5e5e5;
cursor:pointer;
}