Press "Enter" to skip to content

Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

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

Autocomplete-Demo


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

    Leave a Reply

    Your email address will not be published.