<!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;

}