Javascript Autocomplete Dropdown without Jquery

Category: Text & Input | February 12, 2019
Author: TarekRaafat
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

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;
    }
    
});