JavaScript Library For Fast Full Page Filtering – holmes.js

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