Author: | Haroenv |
---|---|
Views Total: | 334 views |
Official Page: | Go to website |
Last Update: | August 19, 2018 |
License: | MIT |
Preview:

Description:
holmes.js is a lightweight JavaScript library which allows the user to quickly and simply filter / search through any content within your webpage.
How to use it:
Create a search filed to filter content within the webpage.
<input type="search" placeholder="search here" required>
Download and insert the holmes.js library into the webpage.
<script src="js/holmes.js"></script>
Initialize the holmes and specify the target content you want to search for.
holmes({ input: 'input', find: '.element' });
Add the following CSS snippets into your style
section.
.hidden { display: none; }
All default parameters.
holmes({ // A querySelector to find the input input: 'input[type=search]', // A querySelectorAll rule to find each of the find terms find: null, // Text to show when there are no results (innerHTML) placeholder: false, // to start showing the result in a mark tag inside the .find, you should enable this mark: false, class: { // class to add to matched items visible: false, // class to add to non-matched items hidden: 'hidden' }, // query the value of the .find at every input dynamic: false, // minimum amount of characters need to be typed before Holmes starts filtering minCharacters: 0, // adds hidden="true" to hidden elements hiddenAttr: !1, // A custom matching function to be called with as first argument the text of an element, and as second argument the current input text. This should return true if you want the element to show, and false if it needs to be hidden. shouldShow: function(){} });
Callback functions available.
holmes({ onHidden: function(el){}, onVisible: function(el){}, onEmpty: function(placeholder){}, onFound: function(placeholder){}, onInput: function(input){}, });
API methods.
var h = new holmes(options); // clear h.clear() // what elements are visible, hidden and in total at any point h.count() // Start an even listener for the specified options. Holmes always has .start() running on initialisation. h.start() // Stops the current running event listener. Resolves a Promise when this has been completed. h.stop()
Changelog:
v1.17.3 (08/19/2018)
- Update