How to apply search filter for a list using Javascript
Table of Contents
Implement Filter/Search Functionality in Javascript
When dealing with lists of items on a webpage, implementing a search filter can greatly enhance the user experience. In this tutorial, we’ll explore how to create a simple search filter using HTML, CSS, and JavaScript.
Step 1: Set Up Your HTML Structure
The syntax provided below creates the basic HTML structure for a webpage. In this example, we’ll use an input field for the search query and an unordered list to display our items:
<html>
<head>
<style>
input[type="text"]{
background-color: #FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #cccccc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.75);
height: 2.3125rem;
margin: 0 0 1rem 0;
padding: 0.5rem;
}
input[type="text"]:focus{
background: #fafafa;
border-color: #999999;
outline: none;
}
#myList{
line-height: 1.6;
font-size: 18px;
overflow-y: scroll;
height: 500px;
border: 2px lightgray solid;
padding-left:15px;
}
#myInput{
width: 80%; display:inline; border-radius: 10px;
}
</style>
</head>
<body>
<div>
<h2><strong>Filter Search List Using javascript</strong></h2>
<br>
<div>
<!-- Search TextBox -->
<div>
<span style="font-weight:bold; font-size: 18px; color: #555555; ">Search filter: </span>
<input type="text" id="myInput" placeholder=" type & filter..."/>
</div>
<br>
<!-- Loading List of Items in each Div section -->
<div id="myList">
<!-- Item 1 -->
<div class="filter-list-item" style=""><a href="" target="_blank">One</a></div>
<!-- Item 2 -->
<div class="filter-list-item" style=""><a href="" target="_blank">Two</a></div>
<!-- Item 3 -->
<div class="filter-list-item" style=""><a href="" target="_blank">Three</a></div>
<!-- Item 4 -->
<div class="filter-list-item" style=""><a href="" target="_blank">Four</a></div>
<!-- Item 5 -->
<div class="filter-list-item" style=""><a href="" target="_blank">Five</a></div>
<!-- Item 6 -->
<div class="filter-list-item" style=""><a href="" target="_blank">Six</a></div>
</div>
</div>
</div>
<!-- Keep JS with in body section -->
<script type="text/javascript">
</script>
</body>
</html>Step 2: Add JavaScript for the Search Filter
There are two kinds of search filters. One matches exactly what you type in the search input, while the other shows multiple filter results based on each matching word in the input field. Below is the JavaScript code for both scenarios.
a) Search Filter List Items by Exact Match – Javascript Code
Use this JS code when you want to filter items that match exactly with the text entered in the input textbox.
<script type="text/javascript">
document.getElementById("myInput").addEventListener("keyup",
function searchFilter() {
// Declare variables
var input, filter, div, divs, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
div = document.getElementById('myList');
divs = div.getElementsByClassName('filter-list-item');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < divs.length; i++) {
a = divs[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = '';
} else {
divs[i].style.display = 'none';
}
}
});
</script>- adds an event listener to the HTML element with the ID “myInput”, specifically listening for the “keyup” event (when a key is released) and this will trigger “searchFilter” function
- Retrieves the input element with the ID “myInput” and stores its value in the variable filter after converting it to uppercase.
- Retrieves a collection of elements with the class “filter-list-item” within “myList” the container.
- Iterates through each element with the class “filter-list-item.”
- Retrieves the anchor element (<a>) within the current item.
- Compares the uppercase content of the anchor element with the uppercase filter text. If a match is found, the item is displayed; otherwise, it is hidden.
To hide unmatched items use – divs[i].style.display = ‘none’;
To show matched item use – divs[i].style.display = ”;
b) Filter Search List Items by Multi-Word Match – Javascript Code
Use this JS code when you want to retrieve multiple search results that match all the words (split by space) entered in the input textbox.
<script type="text/javascript">
document.getElementById("myInput").addEventListener("keyup",
function searchFilter() {
// Declare variables
var input, filter, div, divs, a, i;
// remove double spaces in between text, trim outer space and convert to uppercase
input = document.getElementById('myInput').value.replace(/\s{2,}/g, ' ').trim().toUpperCase();
// split filter search text by space and add it in array.
arrFilters = input.split(' ');
div = document.getElementById('myList');
divs = div.getElementsByClassName('filter-list-item');
// if no input then show all items.
if (input.length == 0) {
for (i = 0; i < divs.length; i++) {
divs[i].style.display = '';
}
}
else {
// Loop through all list items
for (i = 0; i < divs.length; i++) {
a = divs[i].getElementsByTagName('a')[0];
// hide items by default
divs[i].style.display = 'none';
for (j = 0; j < arrFilters.length; j++) {
// if list item matches with any filter array item then display it.
if ((arrFilters[j].length > 0) && (a.innerHTML.toUpperCase().indexOf(arrFilters[j]) > -1)) {
divs[i].style.display = '';
break;
}
}
}
}
});
</script>
This code works similarly as explained above but with a slight difference. Instead of searching the entire text at once, it looks at each individual word. It then finds and displays items that match, resulting in multiple search filter results.
Remove toUpperCase() if you want to perform a case-sensitive search.