jQuery Search and Filter Function | Find Words or Phrases

Datetime:2017-04-19 05:29:09         Topic: jQuery          Share        Original >>
Here to See The Original Article!!!

jQuery is used for a lot of things, but searching isn't always the first thing that comes to mind. This jQuery search function is intended to make the process of looking through and filtering content as simple as possible. I've condensed the whole process into a single function, where all you need to do is add a few parameters to get started.

In a lot of ways this is going to be very similar to an older article that I wrote about finding and filtering content within a HTML list, Live Search a HTML List using jQuery – No Plugin Needed . The reason I've created this function is because I received a few comments asking how it could be applied to other HTML elements.

Before we go any further though, here's an unstyled working example. As you type in the textbox it searches each of the child elements within a specified container for matches to the word or phrase, and then hides any that don't match it.

See the Pen jQuery HTML Filter Function by html5andblog ( @html5andblog ) on CodePen .

To get this working on your site, all you need to get started is a text input, a container element with child elements inside. It's easiest if each of these have classes or IDs added too:

<input type="text" class="search-field">

<div class="container">  
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   <div class="item">Quisque ut ex placerat, malesuada purus vel, sodales mi.</div>
   <div class="item">Etiam accumsan facilisis pretium.</div>
   <div class="item">Ut mattis tempor quam.</div>
   <div class="item">In hac habitasse platea dictumst.</div>
</div>

Then the function will need including on the page. I've annotated the code to explain what each part is doing and how it all works together:

function jsSearch(searchInput, parentElem, childElem) {

// Runs function whenever a letter is entered into text input
$(searchInput).on('keyup', function(){

    // Gets the search term and converts it to lowercase
    var searchTerm = $(this).val().toLowerCase();

    // Loop through all the elements being searched for text / phrase
    $(parentElem).find(childElem).each(function(){
        // If a single element contains text being searched for then set it to be visible or hidden if not found
        // If the search term length is removed show all entries
        if ($(this).text().toLowerCase().indexOf(searchTerm) > -1 || searchTerm.length < 1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

});

};

Finally the function can be applied to the HTML elements present on the page to initiate the jQuery search functionality:

// Search Input, Parent Element, Child Element
jsSearch('.search-field', '.container', '.item');

With this there are three parameters that need specifying. The first is the search element, the second is the parent element and the third are the child elements where the jQuery search will check if the content matches the text input.

Once you've got it working then all that's left to do is style it and make it look more visual.

jQuery Search Styled Example

See the Pen jQuery Filter Function Styled by html5andblog ( @html5andblog ) on CodePen .








New