jQuery – Search text in the Element with :contains() Selector

The :contains() is a jQuery selector which allows us to search text within the element and select it and perform an action on it.

For example – you are dynamically listing records from MySQL database table here, you have a requirement to add search filter based on key press. In case you can use jQuery AJAX which requests and load data from the server every time when the user press key in the search field.

You can simplify this with :contains() jQuery selector to filter data in Client side.

There are some other ways in jQuery by which you can do the same operation. But, in this tutorial, I explain you the use :contains() selector for search text.

Note – The :contains() searching is case-sensitive. In the demonstration, I show how you can use for case-insensitive search.

jQuery - Search text in the element with :contains() selector


Contents

  1. :contains()
  2. Layout
  3. Search Text in Container
  4. With specific class in Container
  5. Case-insensitive
  6. Conclusion

 

1. :contains()

It selects the element which contains the specified value.

Syntax –

$(  ":contains( 'search text' )" );

Example 

$( "div:contains( 'hello' )" )

 

2. Layout

I have created post list where the input field is for search text and the <div class='content'> element which contains <div class='title'> and a <p> element.

Completed Code

<div class='container'>

 <!-- Search control -->
 <div>
  <input type='text' id='search' placeholder='Search Text'>
 </div>

 <!-- Content list -->
 <div class='content'>
  <div class='title'>
   <a href='http://makitweb.com/dynamically-add-and-remove-element-with-jquery/' >
     Dynamically add and remove element with jQuery
   </a> 
  </div>
  <p>In this post, I show how you can add and remove new element within your web page with jQuery...</p>
 </div>

 <div class='content'>
  <div class='title'>
    <a href='http://makitweb.com/how-to-delete-value-from-array-in-javascript/'>
     How to Delete a value from an Array in JavaScript
    </a>
  </div>
  <p>There are many cases when we have to remove some unused values from the Array which no longer needed within the program...</p>
 </div>

 <div class='content'>
  <div class='title'><a href='http://makitweb.com/read-and-get-parameters-from-url-with-javascript/'>Read and Get Parameters from URL with JavaScript</a></div>
  <p>If you are familiar with PHP where for reading parameters from URL you can use either $_GET or $_REQUEST which take the name of the argument and return value of it...</p>
 </div>

 <div class='content'>
  <div class='title'>
   <a href='http://makitweb.com/html-how-to-show-text-above-image-on-hover/'>
    HTML – How to Show Text Above Image on Hover
   </a>
  </div>
  <p>In this quick tutorial, I show How you can show text above Image when the user hovers the image using only HTML and CSS, no jQuery and JavaScript...</p>
 </div>
 
</div>

 

3. Search Text in Container

The first start with a basic example, where I search input text within the <div class='content'> container if the text is available then show otherwise hide containers.

Completed Code

$(document).ready(function(){
 $('#search').keyup(function(){
 
  // Search text
  var text = $(this).val();
 
  // Hide all content class element
  $('.content').hide();

  // Search and show
  $('.content:contains("'+text+'")').show();
 
 });
});

Output

Input search text in the Textbox.


 

4. With specific element in Container

Now search for child elements with the specific class.

Completed Code

$(document).ready(function(){
 $('#search').keyup(function(){
 
  // Search text
  var text = $(this).val();
 
  // Hide all content class element
  $('.content').hide();

  // Search 
  $('.content .title:contains("'+text+'")').closest('.content').show();
 
 });
});

The above code searches the input value in title class if it finds then show the parent container.

Output

Search text in Title.


 

5. Case-insensitive

# Example 1

$(document).ready(function(){
 $('#search').keyup(function(){
 
  // Search text
  var text = $(this).val();
 
  // Hide all content class element
  $('.content').hide();

  // Search 
  $('.content .title:contains("'+text+'")').closest('.content').show();
 
 });
});

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

# Example 2

Loop all .content class and search text with indexOf().

$(document).ready(function(){
  $('#search').keyup(function(){
 
   // Search text
   var text = $(this).val().toLowerCase();
 
   // Hide all content class element
   $('.content').hide();

   // Search 
   $('.content .title').each(function(){
 
    if($(this).text().toLowerCase().indexOf(""+text+"") != -1 ){
     $(this).closest('.content').show();
    }
  });
 });
});

Output

Both gives the same output –


 

6. Conclusion

This makes your selection process little easier if you are searching value in the element and want to take action on it like – update CSS style, add or remove CSS class, remove elements.

If this not works for you can use find(), indexOf(), filter(), etc. methods.

Related Post

Spread the love

One Comment

  1. Thanks a bunch.
    I’m new to JavaScript and had a hard time building this feature. Your guide made it a breeze.

    October 22, 2017
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *