List is a collection of several elements that are displayed in the same form. Examples like the menu on the website. How about filter list? This filter list works like a search. When a character is written in the search box, it will display only the corresponding list of characters written in the search box. filter list can be spelled search in the list. For more details let's look at the examples and steps to make it below:
filterlist.html
or you rename as you want.<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Suvervisor List</h2>
<p>Type suvervisor name in input field to search the list for specific:</p>
<input class="form-control" id="filter" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="list">
<li class="list-group-item">utopian-io</li>
<li class="list-group-item">arie.steem</li>
<li class="list-group-item">espoem</li>
<li class="list-group-item">knowledges</li>
</ul>
</div>
</body>
</html>
<head>
element<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Writing the jQuery code. add the <script></script>
element before </body>
To start coding jQuery we need to add ready()
Event. This Event to load javascript after loading the HTML element, So the HTML will be load fist, then jQuery. Add the following code in <script>
element.
$(document).ready(function(){
});
$("#filter").on("keyup", function() {
});
var value = $(this).val().toLowerCase();
$("#list li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
Code Explained :
value
as the variable name,$(this).val()
as method to get input value,toLowerCase()
method to convert all caracter to lowercase and Thetoggle
method hides the row (display:none) that does not match the search.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Suvervisor List</h2>
<p>Type suvervisor name in input field to search the list for specific:</p>
<input class="form-control" id="filter" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="list">
<li class="list-group-item">utopian-io</li>
<li class="list-group-item">arie.steem</li>
<li class="list-group-item">espoem</li>
<li class="list-group-item">knowledges</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#list li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
This is the first tutorial about jQuery