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

Category: Image , Javascript | September 20, 2022
Author:heller
Views Total:0 views
Official Page:Go to website
Last Update:September 20, 2022
License:MIT

Preview:

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

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();
};

You Might Be Interested In:


Leave a Reply