Skip to Content

keywordFilter()

Allows real-time filtering of lists.

JavaScript August 18, 2019

Usage

JavaScript
nebula.keywordFilter(container, parent, values, filteredClass, operator);

Parameters

container
(Required) (Selector) The selector for the container element that wraps all individual elements.
Default: None

parent
(Required) (Selector) The selector of the parent element of the individual element to be searched/filtered.
Default: None

values
(Required) (String|Array) The text string, RegEx pattern, or array of strings to search for
Default: None

filteredClass
(Optional) (String) The class to add to non-matching items
Default: filtereditem

operator
(Optional) (String) When multiple values are used should this look for any ("or") or all ("and")?
Default: and

Parameter Notes

values parameter will commonly use jQuery(this).val().

To define your own custom regular expression for the “value” parameter, start and end the string with “/”. When using RegEx this way, only 1 parameter is accepted. However, each individual pattern accepts regular expression syntax. See examples below for details.

Request or provide clarification »

Examples

Simple input string filter

JavaScript
jQuery(document).on('keyup', '#example-input', function(){
    nebula.keywordFilter('ul#example-list', 'li', jQuery(this).val());
});

Custom RegEx pattern filter

JavaScript
nebula.keywordFilter('ul#example-list', 'li', '/custom|regex|pattern/');

Multiple RegEx patterns (with "or" operator)

JavaScript
nebula.keywordFilter('ul#example-list', 'li', ['custom|pattern', 'number\d+'], 'filtereditem', 'or');

Multiple strings (with "and" operator and custom filtered class)

JavaScript
nebula.keywordFilter('ul#example-list', 'li', ['lorem', 'ipsum', 'dolor'], 'hide-this', 'and');

Demo


Type a keyword into one or both inputs below to filter the list of items

Example List

  • Example 1

    This is the first example.

  • Another Example

    This is the second example.

  • Lorem ipsum dolor

    Duis dictum, turpis vitae mollis imperdiet.

  • Sed id orci volutpat

    Sed risus augue, semper et ornare a, placerat eu nibh.

  • Vestibulum mattis sapien

    Fusce sit amet varius eros.

  • Ut molestie quis

    Donec ex turpis, laoreet at felis

  • Fusce ornare felis

    Morbi hendrerit nibh sit amet aliquet

  • Vestibulum ante

    Lorem ipsum dolor sit amet

  • Quisque non ipsum

    Mauris molestie vestibulum imperdiet

  • Maecenas volutpat

    Vestibulum aliquet arcu molestie

  • Phasellus placerat

    Cras nec ante sed nisl

  • Curabitur a faucibus

    Aenean interdum ut purus

  • Nullam ut ligula

    Fusce consequat semper

  • Example 14

    This is the fourteenth example

  • Example 15

    This is the fifteenth example

  • Example 16

    This is the sixteenth example

Additional Notes

“Container” is the element that wraps all of the individual elements. Think of this as the boundary for the filter. In a list example, the “container” would be the UL.

“Parent” is each individual element that will be filtered. In a list example, the “parent” would be the “LI”.

Note, the function keywordSearch() is an alias of this function for legacy versions of Nebula.

Source File

Located in /assets/js/nebula.js on line 1971.

JavaScript
nebula.keywordFilter = function(container, parent, values, filteredClass, operator){
    if ( typeof values === 'string' ){
        values = [values];
    }
    values = values.filter(String); //Remove any empty values from the array

    if ( !filteredClass ){
        var filteredClass = 'filtereditem';
    }

    jQuery(container).find(parent + '.' + filteredClass).removeClass(filteredClass); //Reset everything for a new search filter

    if ( values.length ){
        //If a regex pattern is specified
        if ( values.length === 1 && values[0].length > 2 && values[0].charAt(0) === '/' && values[0].slice(-1) === '/' ){
            var regex = new RegExp(values[0].substring(1).slice(0, -1), 'i'); //Convert the string to RegEx after removing the first and last /
            jQuery(container).find(parent).each(function(){ //Loop through each element to check against the regex pattern
                var elementText = jQuery(this).text().trim().replace(/\s\s+/g, ' '); //Combine all interior text of the element into a single line and remove extra whitespace
                jQuery(this).addClass(filteredClass);
                if ( regex.test(elementText) ){
                    jQuery(this).removeClass(filteredClass);
                }
            });
        } else {
            if ( !operator || operator === 'and' || operator === 'all' ){ //Match only elements that contain all keywords (Default operator is And if not provided)
                jQuery.each(values, function(index, value){ //Loop through the values to search for
                    if ( value.trim().length ){ //If the value is not empty
                        var regex = new RegExp(value, 'i');

                        jQuery(container).find(parent).not('.' + filteredClass).each(function(){ //Now check elements that have not yet been filtered for this value
                            var elementText = jQuery(this).text().trim().replace(/\s\s+/g, ' '); //Combine all interior text of the element into a single line and remove extra whitespace
                            if ( !regex.test(elementText) ){
                                jQuery(this).addClass(filteredClass);
                            }
                        });
                    }
                });
            } else { //Match elements that contains any keyword
                var pattern = '';
                jQuery.each(values, function(index, value){
                    if ( value.trim().length ){ //If the value is not empty, add it to the pattern
                        pattern += value + '|';
                    }
                });
                pattern = pattern.slice(0, -1); //Remove the last | character
                var regex = new RegExp(pattern, 'i');
                jQuery(container).find(parent).each(function(){ //Loop through each element to check against the regex pattern
                    var elementText = jQuery(this).text().trim().replace(/\s\s+/g, ' '); //Combine all interior text of the element into a single line and remove extra whitespace
                    jQuery(this).addClass(filteredClass);
                    if ( regex.test(elementText) ){
                        jQuery(this).removeClass(filteredClass);
                    }
                });
            }
        }
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.keywordFilter = function(container, parent, values, filteredClass, operator){
    //Write your own code here, leave it blank, or return false.
}