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!