Holmes: Fast Page Searching

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

Star Fork Download

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.