Holmes: Fast Page Searching

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.

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.