Author: | TarekRaafat |
---|---|
Views Total: | 94 views |
Official Page: | Go to website |
Last Update: | December 30, 2020 |
License: | Apache-2.0 |
Preview:

Description:
A dynamic, blazing-fast, dependency-free, and easy-to-use autocomplete & typeahead JavaScript library for modern web development.
Key features:
- Auto displays the suggestion list while typing.
- Fuzzy search is supported.
- Highlights matched results.
- Custom placeholder.
- Limits the maximum number of results to display.
How to use it:
Install and import the autoComplete.js.
# Yarn $ yarn add @tarekraafat/autocomplete.js --save # NPM $ npm i @tarekraafat/autocomplete.js --save
// ES6 import autoComplete from "./autoComplete"; // Browser <link rel="stylesheet" href="dist/css/autoComplete.min.css" /> <script src="dist/js/autoComplete.min.js"></script>
Define the data
const data = { src: data, key: ["CSS", "SCRIPT", "COM"] }
Create an input field or text field with a unique ID ‘autoComplete’.
<input id="autoComplete" type="text">
Attach the autoComplete.js to the input field and done.
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", // Input field observer | (Optional) observer: true, // 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, // feedback callback feedback: (data) => { // do something } // triggered after selection onSelection: (feedback) => { // do something } });
Changelog:
v8.2.1 (12/30/2020)
- Package updated
v8.2.0 (12/27/2020)
- Added: data.results API to access and manipulate data feedback matching results
- Fixed: resultItem.content API data params to pass the entire item data
v8.1.1 (12/23/2020)
- Fixed: selector API to accept function
- Fixed: resultsList destination API to accept function
v8.1.0 (12/12/2020)
- Added: observer Controller API [Turned off by default]
- Added: New Light Style [autoComplete.02.css]
- Fixed: Main build live reload issue
v8.0.4 (12/11/2020)
- Fix: Error when using multiple instances
v8.0.3 (12/10/2020)
- Fixed: Custom results list rendering destination
v8.0.1 (12/05/2020)
- Build Update
v8.0.0 (12/05/2020)
- Whole New More Modern Architecture Design
- Added: High Quality Accessibility (WAI-ARIA 1.2) Support
- Added: Life Cycle Events
- Added: init/unInit methods
- Added: Input Field Observing Functionality
- Added: Diacritics 2 way Support
- Added: API for Controlling Classes & IDs
- Added: New neutral/non-opinionated Style
- Enhanced: autoComplete.js Internal Flow
- Enhanced: data Fetching
- Enhanced: data Storing
- Enhanced: resultsList Navigation
- Enhanced: resultsList Rendering
- Fixed: resultsList element visibility in idle state
- Fixed: query threshold length accuracy
- Fixed: Calling dataSrc on each trigger
- Fixed: Right-click behavior on resultsList
- Fixed: Cursor relocation on keyboard keyUp or keyDown
- Fixed: data as a Number parsing issue
- Fixed: autoComplete.js interference with native keyboard events
- Fixed: Keyboard events stops working when onSelection not defined
v7.2.0 (03/24/2020)
- Threshold Limit Fix & Added Diacritics Handling
v7.2.0 (11/10/2019)
- Added support to textarea input field
v7.1.3 (11/03/2019)
- Enhanced mouse selection
v7.1.2 (10/30/2019)
- Fixed error behavior occurs when searching (Empty, False, Null) record
v7.1.1 (10/21/2019)
- resList now is fully created in DocumentFragment before rendering for better performance
- config parameters restructure
- Reduced autoComplete.js weight
v7.1.0 (10/07/2019)
- New improved Navigation logic
- Enhanced resList.navigation API data feedback
- Major code Refactor & Optimizations
v7.0.3 (09/26/2019)
- Duplicate values selection bugfix
v7.0.2 (09/26/2019)
- Data Promise bug fix
- Remote API duplicate calls fix
- trigger.condition enhancement
- Code Refactor for faster performance and lighter weight
v7.0.0 (09/17/2019)
- api multiple calls issue fix
v7.0.0 (09/01/2019)
- New API for results list navigation resultsList.navigation
- New API for autoComplete.js engine trigger.event
- New API for autoComplete.js engine trigger.condition
- Added Support to Shadow DOM expanding customizability
- Node Element Support for Input Selector
- Empty record issue fix
- customEngine API [Removed]
- customEngine merged with searchEngine API key for more convenience [Changed]
- Code Optimizations
v6.0.0 (06/15/2019)
- CustomEvent & Closest method IE compatibility
- Query interception
- Simplified resultsList & resultItem
- EventEmitter fires on clearing input field
- EventEmitter now has input method for row user’s input
- EventEmitter now has query method for intercepted user’s input
v5.3.0 (06/05/2019)
- Get results from eventEmitter without rendering list through resultsList.render API
- EventEmitter name type changed to autoComplete [Changed]
v5.2.0 (06/02/2019)
- Added Event Emitter on noResults event
v5.1.1 (05/31/2019)
- UpperCase query bug fix
- Added noResults open API for No Results
- HTML elements ContentEditable Input Support
v5.0.0 (05/07/2019)
- Large datasets handling
- API Data fetching & Dynamic Data reloading
- Debouncing API Calls
- Custom resultsList & resultItem Elements
- Bug fixes
- Code Clean Up
v4.0.0 (03/01/2019)
- Multiple searchable keys for data src
- Rendered results in original case
- Improved Development Environment
- IE 11 fix
- Improved returned data object onSelection
- Sort rendered results API
- Enhanced results navigation adding ArrowRight key for selection
- Added event emitter on input field type name type returns
- Code Clean Up
v3.2.2 (02/06/2019)
- Fixed bug with hightlight API default value during strict engine mode
- Fixed bug with resultsList API default value when not configured
v3.2.1 (01/09/2018)
- Isolated resultsList value for multiple instances
v2.1.0 (01/06/2018)
- Updated
v2.0.0 (12/23/2018)
- Updated options.
v1.5.4 (12/21/2018)
- Gzipped options for both builds & style issue fixed.
v1.5.3 (12/20/2018)
- Added “threshold” option, code optimizations
v1.5.2 (12/19/2018)
- Fixed onSelection null action issue & Optimized the code.
v1.4.1 (12/11/2018)
- Updated Presentation Layer.
- Code Cleanup.
v1.4.0 (12/09/2018)
- Added searchEngine mode switcher to presentation layer for better demonstration.
- Optimized “autoComplete.js”, changed input style in “autoComplete.css” sheet and updated build dependencies.
v1.3.1 (12/03/2018)
- Update styles
v1.3.0 (12/02/2018)
- Added new “datasrc” as a function returns “Array”.
v1.2.1 (11/27/2018)
- Added maximum Placeholder text length feature.
v1.2.0 (11/26/2018)
- Redesigned the entire search engine for better experience and results, added support for multi-keywords search.
v1.1.0 (11/25/2018)
- Refactored & Optimized the whole library for lighter weight and better performance.
11/23/2018
- Optimization Reduced the library weight by 1KB.