Fast Autocomplete & Typeahead Library – autoComplete.js

Category: Form , Javascript , Recommended | October 7, 2019
Author: TarekRaafat
Views Total: 1,240
Official Page: Go to website
Last Update: October 7, 2019
License: Apache-2.0

Preview:

Fast Autocomplete & Typeahead Library – autoComplete.js

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.

import "./autoComplete.js";

Define the data.

const data = {
      src: data,
      key: ["CSS", "SCRIPT", "COM"]
}

Create an input 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"

    // 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,

    // triggered after selection
    onSelection: value => { 
      document.querySelector(".selection").innerHTML = value.id;
    }
    
});

Changelog:

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.

You Might Be Interested In:


Leave a Reply