Searching for li elements that contain text values - a guide

Question

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox.

Here is the design:

Search List:

<input type="text" id="txtSearch" />

<ul>
  <li>Coffee1</li>
  <li>Coffee2</li>
  <li>Tea1</li>
  <li>Tea2</li>
  <li>Milk1</li>
  <li>Milk2</li>
</ul>

For example: If the user enters 'k1' in the textbox, I want to only display Milk1 & Milk2.

How can this be achieved?

Any help solving this would be greatly appreciated!

javascript jquery css

Answer 1

Answer №1

Here is a method to filter list elements based on user input. Whenever the input changes, all list elements are hidden and only those containing the typed string are displayed:

$('#txtSearch').on('input', function() {
     var userInput = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf(userInput.value) > -1;
     })
     .show();
});

$('#txtSearch').on('input', function() {
     var userInput = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf(userInput.value) > -1;
     })
     .show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtSearch" />

<ul>
  <li>Coffee1</li>
  <li>Coffee2</li>
  <li>Tea1</li>
  <li>Tea2</li>
  <li>Milk1</li>
  <li>Milk2</li>
</ul>

REMEMBER. Using the input event also works for pasted input.

Ref: .filter( function )

Answer 2

Here is a method to filter list elements based on user input. Whenever the input changes, all list elements are hidden and only those containing the typed string are displayed:

$('#txtSearch').on('input', function() {
     var userInput = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf(userInput.value) > -1;
     })
     .show();
});

$('#txtSearch').on('input', function() {
     var userInput = this;
     $(this).next('ul').find('li').hide().filter(function() {
         return $(this).text().indexOf(userInput.value) > -1;
     })
     .show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtSearch" />

<ul>
  <li>Coffee1</li>
  <li>Coffee2</li>
  <li>Tea1</li>
  <li>Tea2</li>
  <li>Milk1</li>
  <li>Milk2</li>
</ul>

REMEMBER. Using the input event also works for pasted input.

Ref: .filter( function )

Answer 3

Answer №2

By utilizing the :contains() selector, you can easily filter content on a webpage. Check out this fiddle for an example.

Here is the key code snippet:

$('#txtSearch').keyup(function(){
  $('li').hide();
  $('li:contains('+$(this).val()+')').show();
})

If you need the search to be case-insensitive, you can modify it like shown in this example. In that fiddle, we introduce a custom :Contains() selector as demonstrated below:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Simply use the newly created :Contains() selector instead of the standard :contains() selector.

Answer 4

By utilizing the :contains() selector, you can easily filter content on a webpage. Check out this fiddle for an example.

Here is the key code snippet:

$('#txtSearch').keyup(function(){
  $('li').hide();
  $('li:contains('+$(this).val()+')').show();
})

If you need the search to be case-insensitive, you can modify it like shown in this example. In that fiddle, we introduce a custom :Contains() selector as demonstrated below:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Simply use the newly created :Contains() selector instead of the standard :contains() selector.

Searching for li elements that contain text values - a guide

Answer №1

Answer №2

Similar questions

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

Filtering out specific properties from an element within a JavaScript forEach loop

I am preparing for a quiz and I am in need of a diverse set of random questions, without any repetition

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

Is there a way to automatically insert page numbers into every internal link on an HTML page?

Transferring an IONIC project to a different computer

Creating a large and spacious modal in Angular using ngx-bootstrap

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

Adding margin to an HTML element causes the entire page to shift downward

Conceal the choice if its value matches that of another option

Promise.all does not wait for the inner Promise.all to complete before continuing

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Change the color of this element and input field background

Implementing asynchronous validation in Angular 2

Finding the correct column in a drop-down menu based on a table array using AngularJS

CSS: Creative ways to switch up background hues within a grid layout

Hide a parent div in jQuery depending on the checkbox status

What is the best way to customize the text in the navigation bar at the top of the page

Tips for effectively utilizing the :valid pseudo-class in Material-UI components to dynamically alter the border styling