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!

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s