Fast Autocomplete & Typeahead Library – autoComplete.js

Category: Form , Javascript , Recommended | December 11, 2018
Author: TarekRaafat
Views Total: 191
Official Page: Go to website
Last Update: December 11, 2018
License: MIT

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 an array of strings for the suggestions.

const data = [
      "CSS",
      "SCRIPT",
      "COM"
      // more data here
]

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({

    // data source
    dataSrc: myData,

    // placeholder
    placeHolder: "Type Here ...", 

    // placeholder length
    placeHolderLength: 26,

    // maximum number of results to display
    maxResults: 10,

    // highlights results
    highlight: true,

    // data attributes
    dataAttribute: {
      tag: "set",
      value: "value" 
    },

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

Changelog:

v1.4.1 (12/11/2018)

  • Updated Presentation Layer.

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