Author: | TarekRaafat |
---|---|
Views Total: | 48 views |
Official Page: | Go to website |
Last Update: | April 17, 2021 |
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:
1. 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>
2. Define the data for the suggestions. Can be
// array of strings const data = { key: ["CSS", "SCRIPT", "COM"] } // array of objects const data = { src: [ { "js": "React" }, { "js": "Angular" }, { "css": "LESS" }, { "css": "SASS" } ], key: ["js", "css"] } // function const data = { src: () => { ... }, key: ["js"] } // async const data = { src: async () => { // Fetch Data from external Source const source = await fetch("/path/to/data.json"); const data = await source.json(); // Returns Fetched data return data; }, key: ["js"], cache: true }
3. Create an input field or text field with a unique ID ‘autoComplete’.
<input id="autoComplete" type="text">
4. 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, // String lowerCase "strict" | "loose" // Function with 2 parameters (query, record) returns 1 String of each match individually searchEngine: "strict", // search engine diacritics handler. diacritics: false, // rendered results list object resultsList: { render: true, element: "ul", idName: "autoComplete_list", className: "autoComplete_list", destination: "#autoComplete", position: "afterend", maxResults: 5, container: (element) => { element.setAttribute("data-parent", "food-list"); }, noResults: (list, query) => { // Create no results element const message = document.createElement("li"); message.setAttribute("class", "no_result"); message.setAttribute("tabindex", "1"); // Add text content message.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${query}"</span>`; // Append message to results list list.appendChild(message); }, }, // Rendered result item resultItem: { element: "li", className: "autoComplete_result", content: (item, element) => { element.setAttribute("data-parent", "food-item"); }, highlight: { render: true, className: "autoComplete_highlighted" }, selected: { className: "autoComplete_selected" } }, // feedback callback feedback: (data) => { // do something } // triggered after selection onSelection: (feedback) => { // do something } });
5. Event handlers.
document.querySelector("#autoComplete").addEventListener("init", function (event) { // on init }); document.querySelector("#autoComplete").addEventListener("fetch", function (event) { // after data has been fetched }); document.querySelector("#autoComplete").addEventListener("input", function (event) { // on every input }); document.querySelector("#autoComplete").addEventListener("results", function (event) { // after search operation is done and matching results are ready }); document.querySelector("#autoComplete").addEventListener("open", function (event) { // after opening the results list }); document.querySelector("#autoComplete").addEventListener("navigate", function (event) { // on every "resultsList" navigation interaction }); document.querySelector("#autoComplete").addEventListener("close", function (event) { // after "resultsList" is closed }); document.querySelector("#autoComplete").addEventListener("unInit", function (event) { // after autoComplete.js engine is un-initialized and detached });
Changelog:
v9.0.3 (04/17/2021)
- Fixed: TAB button behavior
- Fixed: resultsList close behavior on inputField double click
v9.0.2 (04/17/2021)
- Fixed: Unexpected behavior onClick
v9.0.1 (04/16/2021)
- Fixed: resultItem.idName issue
- Updated: Tab button behavior
v9.0.0 (03/11/2021)
- Fixed: esc button not working with noResults in some cases
- Added: selection & highlight custom className API methods
- Added: eventEmitter for resultsList fires on list close event
- Added: event parameter to trigger.event API method
- Changed: maxResults API moved under resultsList
- Changed: noResults API moved under resultsList
- Changed: highlight API moved under resultItem
- Changed: selection API moved under resultItem with the name of selected
- Changed: rendered eventEmitter name to open
- Changed: navigation eventEmitter name to navigate
- Changed: closeAllLists refactored and renamed to closeList
- Changed: generateList stage with some refactoring
- Changed: start stage with some refactoring
- Changed: noResults API method with some refactoring details
- Changed: highlight API from String to Object details
- Removed: sort API
- Removed: connect eventEmitter from the preInit stage
v8.3.2 (03/11/2021)
- Fix:
selector
as a function breaks whenobserver
is true - Custom selected item and highlighted text classes
v8.3.1 (02/09/2021)
- Fix: Keyboard navigation selection reset
v8.3.0 (01/30/2021)
- Added:
event
object to theonSelection
datafeedback
v8.2.3 (01/27/2021)
- Fix: resultItem ID setAttribute to be idName instead of className
v8.2.2 (01/22/2021)
- Fix:
diacritics
composite characters do not match
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.
Somehow I liked this library more https://github.com/tomik23/autocomplete more configuration options.