In this tutorial I am gonna to show you how to filter a list using jQuery, suppose we have a big list and want to select some particular text so it’s best to put an input box so users get fast access of their required text. It will not send anything to server it will check in your available page list, very simple and short code to implement it.
HTML List
<input placeholder="Search..." id="s" type="text" />
<ul class="countryList">
<li><a href="#1">India</a></li>
<li><a href="#2">United States</a></li>
<li><a href="#3">Pakistan</a></li>
<li><a href="#4">Sri Lanka</a></li>
<li><a href="#5">Bangladesh</a></li>
<li><a href="#6">Canada</a></li>
<li><a href="#7">United Kingdom</a></li>
<li><a href="#8">Australia</a></li>
<li><a href="#9">Argentina</a></li>
</ul>
Above country list will be filtered on the base of your search, the reason of using search/filter is that this list is unsorted and very difficult to find your desired country so we are using this filter.
jQuery
<script>
$('#s').keyup(function(){
var valThis = $(this).val().toLowerCase();
$('.countryList>li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();
});
});
</script>
Above snippet triggered on keyup event and check all countryList items and show the items which match with your given words.
All together:
Complete working code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to make search input to filter through list using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$('#s').keyup(function(){
var valThis = $(this).val().toLowerCase();
$('.countryList>li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();
});
});
});
</script>
</head>
<body>
<div style="margin-left: auto;margin-right: auto;width: 200px;">
<input placeholder="Search..." id="s" type="text" />
<br />
<ul class="countryList">
<li><a href="#1">India</a></li>
<li><a href="#2">United States</a></li>
<li><a href="#3">Pakistan</a></li>
<li><a href="#4">Sri Lanka</a></li>
<li><a href="#5">Bangladesh</a></li>
<li><a href="#6">Canada</a></li>
<li><a href="#7">United Kingdom</a></li>
<li><a href="#8">Australia</a></li>
<li><a href="#9">Argentina</a></li>
</ul>
</div>
</body>
</html>
That’s all for today I hope you like this tutorial please don’t forget to give us your feedback.
0 comments:
Post a Comment