It is a simple Javascript autocomplete dropdown plugin which builds with pure vanilla Javascript library. There is no need for jquery or any dependencies. Its lightweight, blazing fast easy to use and a dynamic plugin for modern web development.
If you are working with a nice and clean front-end design and there is a form on the website then this plugin is surely needed to add.
It is an optimization library which is reduced to the weight by 1KB.
While Typing in the text field, A dropdown show and give the suggestions to choose the correct value.
It is progressively designed for speed, high versatility and seamless integration with a wide range of projects & systems, made for users and developers in mind.
Autocomplete Dropdown Features List
- Build with Pure Vanilla Javascript.
- Zero Dependencies.
- Simple & Easy to use.
- Extremely Lightweight.
- Blazing Fast.
- Versatile.
- Hackable & highly customizable.
How to use it without Jquery
Simply install and import the autoComplete.js.
import "./autoComplete.js";
Next simply define the array of strings for the suggestions.
const data = [ "Frontend", "Script", "Com" // more data here ]
As for HTML, Create an input field with a unique ID ‘autoComplete’.
<input id="autoComplete" type="text">
Define the option and customize them as per your need.
new autoComplete({ // data source data: myData, // min character length threshold: 0, // input field selector selector: "#autoComplete" // placeholder placeHolder: "Type Here ...", // strict or loose searchEngine: "strict", // rendered results destination & position renderResults: { destination: document.querySelector("#autoComplete"), position: "afterend" }, // maximum number of results to display maxResults: 5, // highlights results highlight: false, // data attributes dataAttribute: { tag: "set", value: "value" }, // triggered after selection onSelection: value => { document.querySelector(".selection").innerHTML = value.id; } });