jQuery Search Function for data list Search
Title: Creating a jQuery Search Function for data list Search
Introduction:
In this tutorial, we will learn how to implement a simple search functionality using jQuery for an E-commerce website's category search. We'll create a search input box that allows users to filter through various product categories in real-time, making it easier for them to find what they're looking for.
Requirements:
To follow along with this tutorial, you need a basic understanding of HTML, CSS, and jQuery. Additionally, ensure you have access to the internet to include the jQuery library from a Content Delivery Network (CDN).
Step 1: Setting Up the HTML Structure
We'll begin by creating the basic HTML structure for our data list search page. Save the following code in an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Search</title>
</head>
<body>
<div class="search_filter_data_list">
<p>1. Data list Search</p>
<input type="text" value="" class="search_input" placeholder="Search...">
<ul>
<li class="filter_data_list">Electronics</li>
<li class="filter_data_list">Smartphones</li>
<li class="filter_data_list">Laptops</li>
<li class="filter_data_list">Cameras</li>
<li class="filter_data_list">Clothing
<li class="filter_data_list">Men's Clothing</li>
<li class="filter_data_list">Women's Clothing</li>
<li class="filter_data_list">Accessories</li>
<li class="filter_data_list">Home & Garden
<li class="filter_data_list">Furniture</li>
<li class="filter_data_list">Home Decor</li>
<li class="filter_data_list">Kitchen & Dining</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// When the search input is updated (a key is pressed or released)
$(".search_filter_data_list").find('.search_input').on("keyup", function () {
var value = $(this).val().toLowerCase(); // Get the input value in lowercase
$(this).closest(".search_filter_data_list").find('.filter_data_list').filter(function () {
// Toggle the visibility of each category list item based on the search input
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
// The above line checks if the category name contains the search input
// If it does, it shows the list item; otherwise, it hides it
});
});
});
</script>
</body>
</html>Step 2: Implementing the Search Functionality with jQuery
Now, let's add the jQuery script that will enable our search functionality. This script will dynamically filter the category list items based on the user's input. Insert the following code inside the `<script>` tag:
Step 3: Explanation
- We start by enclosing our jQuery code within the `$(document).ready()` function to ensure it runs once the page has finished loading.
- We target the search input element using the class selector `.search_input`.
- We attach a `keyup` event listener to the search input. This means that every time a key is pressed or released within the input, the search function will trigger.
- Inside the event listener, we retrieve the value entered in the search input and convert it to lowercase using the `.toLowerCase()` method. This allows us to perform a case-insensitive search.
- We then use `.closest(".search_filter_data_list")` to find the closest ancestor element with the class `search_filter_data_list`. This helps us locate the container that holds both the search input and the category list.
- With `.find('.filter_data_list')`, we search for all list items within the category list that have the class `filter_data_list`.
- We use the `.filter()` method to iterate over each category list item. For each item, we check if its text content (category name) contains the search input's value. If it does, we show the list item using `.toggle(true)`; otherwise, we hide it using `.toggle(false)`.
Step 4: Testing the Functionality
Save the HTML file and open it in your web browser. You should see a search input box and a list of categories. As you type in the search box, the categories will dynamically show or hide based on the search input.
Leave A Comment