<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" class="input-text" id="search" placeholder="Search" />
<span id="filter-count"></span>
<ul id="menu-list">
<li> <a href="/jquery-draggable.html"> jQuery Draggable </a></li>
<li> <a href="/jquery-resizable.html"> jQuery Resizable </a></li>
<li> <a href="/jquery-toggle.html"> jQuery Toggle </a></li>
<li> <a href="/jquery-add-remove-class.html"> jQuery Add Remove Class </a> </li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#search").keyup(function () {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the menu list
$("#menu-list li").each(function () {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
if (count > 0) {
$("#filter-count").text("Top " + count + " results for: " + filter);
} else {
$("#filter-count").text("No results for: " + filter);
}
if (filter == "") {
$("#filter-count").text("")
}
});
});
</script>
</body>
</html>