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 few parameters.

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

container – a class, id or tag name where you want to apply search. This parameter is not required, if you leave blank or empty, SearchJS will searching 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. 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s