Author: | Riper3 |
---|---|
Views Total: | 1,471 views |
Official Page: | Go to website |
Last Update: | December 29, 2020 |
License: | MIT |
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); });