Tutorial
Holmes: Fast Page Searching
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Holmes is a tool that lets you search for content on a page easily. If you have a page with tons of content, Holmes can be a really useful tool to allow a visitor to type-in an input field and automatically be left with only the content that matches the search query.
Developer: Haroen Viaene
Installation
npm installation:
npm install holmes.js --save
Bower installation:
bower install holmes.js --save
Then you can use a tool like Browserify to include Holmes in your project.
Also make sure that you have a CSS class named hidden defined that sets display: none. This class will be used by Holmes to hide elements that don’t match the search query.
Usage
It’s very simple to use. You instantiate Holmes and define a selector for the input and one for the individual possible results. It doesn’t get any easier than that!
$( document ).ready(function() {
holmes({
input: 'input.narrow-down',
find: 'div.single-card'
})
});
There also are a few extra options that you can play with: placeholder, class, dynamic, contenteditable & instant.
