Concepts Used: keyup(), filtering elements
Features:
- Search through a list dynamically
<!DOCTYPE html>
<html>
<head>
<title>Live Search</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Live Search Filter</h2>
<input type="text" id="search" placeholder="Search...">
<ul id="list">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ul>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
let value = $(this).val().toLowerCase();
$("#list li").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>
</body>
</html>
Explanation:
.keyup()detects input changes..filter()checks list items dynamically.
Leave a Reply