AutoComplete JS is a simple, pure Vanilla JavaScript library that has been progressively designed for speed, high versatility, and seamless integration with a wide range of projects and systems designed for users and developers.
Key options:
- Pure Vanilla Javascript
- Zero Dependencies
- Simple & Easy to use
- Extremely Lightweight
- Blazing Fast
- Versatile
- Hackable & highly customizable
How to make use of it:
Install and import the autoComplete.js.
import "./autoComplete.js";
Define the info.
const data = { src: data, key: ["CSS", "HTML", "jQuery"] }
Create an input field or text field with a singular ID ‘autoComplete’.
<input id="autoComplete" type="text">
Attach the autoComplete.js to the input field and accomplished it.
new autoComplete({ // Array, Function, Async data: myData, // events or conditions trigger: { events: ["input"], condition: queryValue.length > this.threshold && queryValue !== " " } // object with 1 method manipulate: Function with (query) argument query: {}, // sort rendered results ascendingly | (Optional) sort: (a, b) => { if (a.match < b.match) return -1; if (a.match > b.match) return 1; return 0; }, // min character length threshold: 0, // input field selector selector: "#autoComplete" // placeholder placeHolder: "Type Here ...", // minimum duration after typing idle state for engine to kick in debounce: 0, // strict or loose searchEngine: "strict", // rendered results list object resultsList: { container: source => { resultsListID = "language_List"; return resultsListID; }, destination: document.querySelector("#autoComplete"), position: "afterend" }, // Rendered result item resultItem: (data, source) => { return `${data.match}`; }, // maximum number of results to display maxResults: 5, // action script on noResults found noResults: function(){}, // highlights results highlight: false, // triggered after selection onSelection: value => { document.querySelector(".selection").innerHTML = value.id; } });
Fast Autocomplete & Typeahead Library, AutoComplete JS Plugin/Github
See Demo And Download
Official Website(TarekRaafat): Click Here
This superior jQuery/javascript plugin is developed by TarekRaafat. For extra Advanced Usages, please go to the official website.
Be First to Comment