Useful javascript library for inline searching

In one of the previous posts, I presented you a lightweight javascript library for

dynamically joining pictures. Today, I will show you SearchJS, a very useful open-source javascript library for inline searching which not requires jQuery. SearchJS is a fast searching engine written in javascript, good for one-page websites or documentation HTML pages.

You can customize SearchJS with a few parameters.

string – a string for searching across the document. This parameter is a required

container – a class, id, or tag name where you want to apply search. This parameter is not required, if you leave it blank or empty, SearchJS will search the entire document.

searchType – with this parameter, you can specify the search type, match_terms or match_string. If you pass mach_terms. This parameter is not required. Default value is match_string.

ignoreCase – you can pass true or false. This parameter is also not required. The default value is true.

Usage:

With pure javascript

document.getElementById('q').addEventListener('keyup', function(){
    search.term({
        'string'     : this.value
        ,'container' : '.searchable' // #element, .element or leave blank for entire document, not required
        //,'searchType' : 'match_term' // mach_term or match_string, not required
        //,'ignoreCase' : false // true or false, not required
    });
});

With jQuery

$('#q').keyup(function(){
    search.term({
        'string'     : this.value
        ,'container' : '.searchable' // #element, .element or leave blank for entire document, not required
        //,'searchType' : 'match_term' // mach_term or match_string, not required
        //,'ignoreCase' : false // true or false, not required
    });
});

This video shows you how SearchJS works:

The entire source code you can be found at my github, and the example from the video, is here

Hope this library will be useful to you! Happy coding!

Advertisement