Fast Filtering (Fuzz-search) JavaScript Library – instafilter.js

Preview:

Description:

A tiny open source Vanilla JavaScript library to add filtering and fuzzy-searching functionality to your long lists, as the user types.

It’s useful for narrowing down long lists or finding results by typing just the beginning of keywords, without your customers needing to scroll through everything.

How to use it:

1. Add the instafilter.js library to the page.

<script src="./instafilter.js"></script>

2. Enable a search field to filter your long list.

<input type="text" value="" name="example-search" id="search" />

<ul id="items">
  <li>
    <a href="http://example.com/this/url/is/not/searched" class="text">
      Cauliflower
    </a> | <a>(This text is not searched)</a>
  </li>
  <li>
    <a href="http://example.com/this/url/is/not/searched" class="text">
      Broccoli
    </a> | <a>(This text is not searched)</a>
  </li>
  <li>
    <a href="http://example.com/this/url/is/not/searched" class="text">
      Carrot
    </a> | <a>(This text is not searched)</a>
  </li>
  <li>
    <a class="text">Cucumber</a>
  </li>
  <li>
    <a class="text">Potato</a>
  </li>
  <li>
    <a class="text">Pepper</a>
  </li>
  <li>
    <a class="text">Tomato</a>
  </li>
  <li>
    <a class="text">Onion</a>
  </li>
  <li>
    <a class="text">Squash</a>
  </li>
</ul>

let options = {
    listSelector: '#items',
    itemSelector: 'li',
    contentSelector: '.text'
};
window.onload = function() {
  let searchInput = document.getElementById('search');
  Instafilter.activate(searchInput, options);
  document.getElementById('search').focus();
};