autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems.

Features

• Pure Vanilla Javascript
• Zero Dependencies
• Simple & Lightweight
• Powerful Search Engine with two different modes
• Diacritics Support
• Debounce Support
• Life Cycle Events
• Useful plugin API
• WAI-ARIA Compliant
• Highly Customizable
• Works on anything (<input>, <textarea> and contentEditable elements)
• Well Documented

Must Read: [Bootstrap 5] Autocomplete Functionality for Input Fields in Vanilla Javascript

How to make use of it:

1. Installation:

npm i @tarekraafat/autocomplete.js

2. CDN Code:

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css">

3. Add an <input> or <textarea> tag to your html page:

<input id="autoComplete">

<!-- OR -->

<textarea id="autoComplete">

4. Import the autoComplete.js library into your project.

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>

5. Set the autoComplete.js instance configurations:

// API Basic Configuration Object
{
    placeHolder: "Search for Food...",
    data: {
        src: ["Sauce - Thousand Island", "Wild Boar - Tenderloin", "Goat - Whole Cut"]
    },
    resultItem: {
        highlight: true,
    }
}

data _^(required)

Responsible for the data source selection

• Type: Object

Methods:

src _^(required)

• Type: Array|Function returns Array of results values
  • Parameters: (query) (Only works if data.cache is false)
• Default: null

keys _^(required)

• Type: Array (Only required if data.src is Array of Objects)
• Default: null

Must Read: Select With Autocomplete Slots Bootstrap Material Design Themes

cache _^(optional)

• Type: Boolean
• Default: false

filter _^(optional)

• Type: Function returns Array of results values
  • Parameters: (list)
• Default: No action

Events

Responsible for the input field and results list events additions or overriding

• Type: Object
  • input: Object of functions with the event type name
  • list: Object of functions with the event type name
• Default:
  • input: keydown and blur
  • list: mousedown and click

search(query, record, options)

autoComplete.js powerful search engine

• query: String
• record: String
• options: Object_^(optional)
  • mode: String
    • "strict" search mode
    • "loose" search mode
  • diacritics: Boolean
  • highlight: Boolean | String of class values

Defaults:

Must Read: Autocomplete/Typeahead JS Plugin For Bootstrap v5

Arguments:

• options: Object
  • mode: "strict"
  • diacritics: false
  • highlight: false

See Also –

Angular ng Material Autocomplete Validation Plugin Library
Progressive and Customizable Autocomplete JavaScript Library | horsey.js
Mention Autocomplete Tag Input Plugin Using JavaScript

See Demo And Download

Official Website(TarekRaafat): Click Here

This superior jQuery/javascript plugin is developed by TarekRaafat. For extra Advanced Usage, please go to the official website.