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
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.