|
Filtering lists is a common functionality in web development, allowing users to search and narrow down large datasets based on specific criteria. JavaScript provides powerful tools to implement such filtering mechanisms efficiently.
Approach:- Create an input field and a container for list items.
- Style the input field and list items for visual appeal.
- Get references to the input field and list items using their IDs or classes.
- Add an event listener to the input field to detect changes in the search query.
- Iterate through each list item, compare its text content with the search query (case-insensitive), and show/hide items accordingly based on whether they match the query. This ensures that only items containing the search query are displayed dynamically as the user types.
Example: Implementation to create a filter list using Javascript.
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Filter List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#filterInput {
margin-bottom: 20px;
padding: 10px;
width: calc(100% - 20px);
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
.listItem {
padding: 10px;
margin: 5px 0;
background-color: #f9f9f9;
border-radius: 5px;
transition: background-color 0.3s;
}
.listItem:hover {
background-color: #e9e9e9;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="filterInput" placeholder="Filter list...">
<ul id="list">
<li class="listItem">JavaScript</li>
<li class="listItem">Python</li>
<li class="listItem">Java</li>
<li class="listItem">C++</li>
<li class="listItem">Ruby</li>
<li class="listItem">PHP</li>
</ul>
</div>
<script>
// JavaScript Filter Functionality
const filterInput =
document.getElementById('filterInput');
const listItems =
document.querySelectorAll('.listItem');
filterInput.addEventListener('input', function () {
const filterValue = filterInput.value.toLowerCase();
listItems.forEach(function (item) {
const text = item.innerText.toLowerCase();
if (text.includes(filterValue)) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
});
</script>
</body>
</html>
Output:
|
