Simple autocomplete pure vanilla Javascript library – autoComplete.js

by Posted on

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.
Simple autocomplete pure vanilla Javascript library - autoComplete.js
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

<input id="autoComplete" type="text">



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.

DEMO | DOWNLOAD

This awesome plugin is developed by TarekRaafat. Visit their official github repository for more information and follow for future updates.


Published by admin