Fast and easy searching inside a page.
Installation
You can install holmes
with either npm
or bower
under the package name holmes.js
. For nmp
that looks like this:
$ npm install --save holmes.js
After which you can add it in your page with i.e. browserify or loading the module in a different script tag.
You have to make sure that you have a css
rule for the class .hidden
that hides elements however you want. One option is to have this:
.hidden {
display: none;
}
but this could be any css
you want.
Usage
holmes({
input: '.search input', // queryselector for the input
find: '.results article', // queryselector for element to search in
placeholder: 'no results', // (optional) text to show when no results
class: {
visible: 'visible', // (optional) class to add to matched elements
hidden: 'hidden' // (optional) class to add to non-matched elements
},
dynamic: false // if true, this will refresh the content every search
});
Showcase
What | who | image |
---|---|---|
bullg.it | @haroenv | ![]() |
family.scss | @lukyvj | ![]() |
I'd love to find out how people use my project, let me know if you want to be featured!
Questions?
Compatible up to IE9.
Let me know on twitter: @haroenv.
License
Apache 2.0