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>
andcontentEditable
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
returnsArray
of results values- Parameters: (
query
) (Only works ifdata.cache
isfalse
)
- Parameters: (
- Default:
null
keys
(required)
- Type:
Array
(Only required ifdata.src
isArray
ofObjects
) - Default:
null
Must Read: Select With Autocomplete Slots Bootstrap Material Design Themes
cache
(optional)
- Type:
Boolean
- Default:
false
filter
(optional)
- Type:
Function
returnsArray
of results values- Parameters: (
list
)
- Parameters: (
- 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
- input:
- Default:
- input:
keydown
andblur
- list:
mousedown
andclick
- input:
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
- mode:
Defaults:
Must Read: Autocomplete/Typeahead JS Plugin For Bootstrap v5
Arguments:
- options:
Object
- mode:
"strict"
- diacritics:
false
- highlight:
false
- mode:
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.