autoComplete.js is a simple pure vanilla Javascript library that’s progressively designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind. It is dynamic, blazing fast, dependency-free, and easy-to-use autocomplete & typeahead JavaScript library for modern web development.
Features:
- Simple & Easy to use
- Pure Vanilla Javascript
- Zero Dependencies
- Lightweight
- Lightning Fast
- Versatile
- Customizable
- First Class Error Handling & Reporting
Libraries
Load thr js and css library on page.
link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected]/dist/css/autoComplete.min.css"/> <script src="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected]/dist/js/autoComplete.min.js">script> |
HTML
Assign id=”autoComplete” to the input filed
JS
Create new instance of autoComplete engine
new autoComplete({ dataSrc: grocery, // Array data source searchEngine: "strict", // Search Engine type threshold: 0, // Min. Chars length before Engine starts renderResults: { // Results Destination & position destination: document.querySelector("#autoComplete"), position: "afterend" }, placeHolder: "Try me...", // Place Holder text maxResults: 10, // Max number of results highlight: true, // Highlight matching results dataAttribute: { tag: "set", // Data attribute tag value: "value" // Data attribute value }, onSelection: value => { // Action script onClick event document.querySelector(".selection").innerHTML = value.id; } }); |
See live demo and download source code.
This awesome plugin is developed by TarekRaafat. Visit their official github repository for more information and follow for future updates.
