Show & Hide Content Based On Input – light-search-js

Preview:

Description:

A lightweight live search (data filter) JavaScript library that allows to show & hide matched content based on the keyboard typed in the search field.

How to use it:

1. Insert the main JavaScript file light-search.js into the HTML page.

<script src="./light-search.js"></script>

2. Create a search field and a container holding the content to filter through.

<input id="search" autocomplete="off">
<div class="results-container">
  <p class="results">London</p>
  <p class="results">New York</p>
  <p class="results">Madrid</p>
</div>

3. Enable the search filed to filter through the content.

document.addEventListener("DOMContentLoaded", () => {
  const input = document.querySelector('#search');
  const results = document.querySelectorAll(".results");
  lightSearch(input, results);
});

4. Only show the content as matched characters typed in the search field. Ideal for applying an autocomplete functionality to your input field.

document.addEventListener("DOMContentLoaded", () => {
  const input = document.querySelector('#search');
  const results = document.querySelectorAll(".results");
  const parent = document.querySelector('.results-container');
  parent.style.display = 'none';
  const writeInput = (e) => {
    input.value = e.target.innerHTML;
    e.target.parentElement.style.display = 'none';
  }
  const options = {
    // parent element
    parent : parent,
    // shows no results message
    noresultsmsg : true,
    msgtag : 'div',
    msgtext : 'Nothing like that here ....'
    // onClick handler
    onclick : writeInput,
    // number of characters to trigger the function
    displayontype : 3,
    // CSS properties & HTML tags
    displayparent: 'flex',
    hideparent: 'none'
  }
  lightSearch(input, results, options);
});