How to make search input to filter through list using jQuery
In this tutorial I am going to show you how to filter a list using jQuery, suppose we have a big list and want to select some particular text so its best to put an input box so users get fast access of there required text. It will not send any thing 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. You can also sort this list using jQuery then people can easily search records.
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.
Tutorial Categories:
i am also a php developer. now having fun with laravel 4. must recommend it to you all. just give it a try.
For Admin… can i post some project here “on making web application using laravel 4” ?
awsome ! u saved me in a project! i used this snippet.!thanks a lot.
actually used it in a mobile app!
Can anyone please help me with the code for searching (box) through my website information, not the information in the database with php and mysql. Please get back to me ASAP.
this is not working with android chrome browser..
Hi there, i’m trying to translate your code for my case, but with no success !
It’s about a table (with MySQL results inside)i want to filter ANY ‘td’ text with the search box to show only tr’s i choose.
basically :
if ‘td’ contains ‘search’ => show ‘tr’
else hide ‘tr’
The problem is that only the last ‘td’ value is taken as a possible choice.
So here’s the code, if you can find where the problem is, i’ll be very happy !
$(document).ready(function() {
$("#s").keyup(function() {
var valThis = $(this).val().toLowerCase();
$(".countryList>td").each(function() {
var str = $(this).text().toLowerCase();
if (str.indexOf(valThis) >= 0) {
$(this).closest("tr").show();
} else $(this).closest("tr").hide();
});
});
});
Indonesia
2
A
United States
2
A
Pakistan
3
A
Sri Lanka
2
A
Bangladesh
2
A
Canada
2
A
United Kingdom
2
A
Australia
2
A
Argentina
2
B
Who can write a tutorial how to make, on php site, two blocks ?
1. Related Posts (with Thumbnails)
2. Most Popular Posts (with Thumbnails)