Filters in JQuery

by vigneshchennai74 Updated: Mar 21, 2023

Guide Kit

In jQuery, filters select a subset of elements from a larger set of elements based on certain criteria. Filters can be applied to any collection of elements, such as the result of a selector expression, an array of elements, or a jQuery object.

The .filter() function takes a function as an argument, which tests each element in the set. If the function returns true, the element is included in the filtered set; if it returns false, it is excluded. In the code example, the .filter() function selects a subset of the list items based on the text entered in the search box.

The filtering function in the example uses the .find() function to search for the h6 element within each list item and retrieves its text content. It then uses the .indexOf() function to check if the search term entered by the user is present in the text content of the h6 element. If the search term is not found in the text content, the function returns -1. Therefore, if the .indexOf() function returns -1, the .filter() function will exclude that list item from the filtered set.

Overall, using filters in jQuery allows developers to easily manipulate the page's contents based on specific conditions or criteria. In this example, filters help users search for dictionary entries by matching the search term entered by the user with the text content of the h6 element within each list item.

Preview of the output that you will get on running this code from your IDE

Code

In this solution we have used JQuery filters

Simple jQuery search filter

HTMLLines of Code : 26License : Strong Copyleft (CC BY-SA 4.0)

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("#my-list > li").show().filter(function() {                           //Select all li and show
      return $(this).find('h6').text().toLowerCase().indexOf(value) === -1;  //Find the h6 and check if the value is substring of the text. Return true if not found.
    }).hide();                                                          //Hide all li that that the value is not the substring of text
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search dictionary..">

<ul id="my-list">
  <li>
    <h6>act</h6>
    <p>test test</p>
  </li>
  <li>
    <h6>bact</h6>
    <p>test test2</p>
  </li>
  <li>
    <h6>bfffff</h6>
    <p>test test3</p>
  </li>
</ul>

Instructions

Download and install VS Code on your desktop.
Open VS Code and create a new file in the editor.
Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for "Simple jQuery search filter" in kandi. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

Visual Studio Code Version 1.76.0

This code tells the use of filters in jQuery allows developers to easily manipulate the contents of the page based on specific conditions or criteria. This process also facilities an easy to use, hassle free method to create a hands-on working version of code which would help us to do filters in Jquery.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Filters in JQuery

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow