Simple and Fast Autocomplete and Typeahead Javascript Library

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