What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

Question

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written:

$("#searchInput").on("keyup", function () {
        var searchTerm = $("#searchInput").val();
        $('li:contains("' + searchTerm + '")').show().siblings(':not(li:contains("' + searchTerm + '"))').hide();
});

The code successfully shows the <li> elements containing the searched text, but the second part - hiding the rest of the items - does not work as expected.

Is there a way to hide <li> elements when searching for unrelated words?

javascript jquery css

Answer 1

Answer №1

Utilize jQuery.not

Method 1

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().not($('li:contains("' + searchTerm + '")')).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>

Consider using jQuery filter ( check snippet below)

Method 2

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().filter(function() {
    return $(this).text().indexOf(searchTerm) == -1
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>

Answer 2

Utilize jQuery.not

Method 1

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().not($('li:contains("' + searchTerm + '")')).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>

Consider using jQuery filter ( check snippet below)

Method 2

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().filter(function() {
    return $(this).text().indexOf(searchTerm) == -1
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

Answer №1

Similar questions

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

Creating a dynamic hyperlink variable that updates based on user input

What is the best method for resetting the CSS style of a specific DOM subtree?

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

Only display entries with no content

Tips for updating the color of buttons after they have been selected, along with a question regarding input

Unable to make a successful POST request using the JQuery $.ajax() function

Suggestions for rectifying the calculation script to include the price, a phone number, 2 digits, and integrating a textfield for cost

The situation arose where Next.js could not access the cookie due to

The information is not being shown. Error: API expression GET is not possible

Exploring the dissimilarity among npm run dev and the parcel index.html

How can we initiate an AJAX request in React when a button is clicked?

Having Trouble Importing a Dependency in TypeScript

Tips for enabling both vertical and horizontal scrolling using the mousewheel on a webpage

Struggling with PHP variables and AJAX JavaScript

Why does Math.max.apply not prioritize the first parameter?

Utilize Angular to transform a standard text string within a JSON object into a properly formatted URL

pattern validation using a regular expression

Creating an HTML table with colspan and rowspan using ng-repeat from a deeply nested JSON dataset

Is it possible to share a MySQL connection for cross-module usage in Node/Express by utilizing promise-mysql?