Advanced Feature-rich Autocomplete JavaScript Library – awesomplete

Category: Form , Javascript , Recommended | May 19, 2020
Author: LeaVerou
Views Total: 204 views
Official Page: Go to website
Last Update: May 19, 2020
License: MIT

Preview:

Advanced Feature-rich Autocomplete JavaScript Library – awesomplete

Description:

awesomplete is a simple yet highly customizable, user-friendly, feature-rich autocomplete library written in pure JavaScript.

Key Features:

  • Supports both dynamic (AJAX) and static data list.
  • Animated suggestion popup when triggered.
  • Supports fuzzy search.
  • Highlights characters in the popup.
  • Allows to trigger the autocomplete with a specific character.
  • Allows to replace values.
  • Allows to sort list itmes.
  • Allows multiple values just like a tag input.
  • Automatically select the first item or not.

Basic usage:

1. Download the package and insert the following JavaScript & CSS files into the HTML page.

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.min.js"></script>

2. Add the CSS class awesomplete to an input field where you want to enable the autocomplete functionality.

<input class="awesomplete" />

3. Define a data list (a list of suggestions) for the autocomplete in the data-list attribute. That’s it.

<input class="awesomplete" data-list="CSS, Script, Com" />

4. You are also allowed to define the data list in a datalist element.

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
  <option>CSS</option>
  <option>Script</option>
  <option>Com</option>
</datalist>

5. Or in an HTML list.

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
  <li>CSS</li>
  <li>Script</li>
  <li>Com</li>
</ul>

6. Initialize the library manually.

<input id="demo" data-list="#mylist" />
<ul id="mylist">
  <li>CSS</li>
  <li>Script</li>
  <li>Com</li>
</ul>
var myAutocomplete = document.getElementById("demo");
new Awesomplete(input, {
    list: "#mylist"
});

7. Or define the data list in a JavaScript array & object.

var myAutocomplete = document.getElementById("demo");

// basic
new Awesomplete(myAutocomplete, {
    list: ["CSS", "Script", "Com"]
});

// or
new Awesomplete(myAutocomplete, {
    list: [
      { label: "CSSScript", value: "CSS" },
      { label: "JavaScript", value: "Script" },
      { label: "CSSScript.com", value: "Com" }
    ]
});

// or
new Awesomplete(myAutocomplete, {
    list: [
      ["CSSScript", "CSS" ],
      ["JavaScript", "Script" ],
      ["CSSScript.com", "Com" ]
    ]
});

// or
var instance = new Awesomplete(myAutocomplete);
awesomplete.list = ["CSS", "Script", "Com"]

8. Or load suggestions from an external data source via AJAX.

var ajax = new XMLHttpRequest();
ajax.open("GET", "/path/to/data/", true);
ajax.onload = function() {
  var list = JSON.parse(ajax.responseText).map(function(i) { return i.name; });
  new Awesomplete(document.querySelector("#example"),{
      list: list 
  });
};
ajax.send();

9. All possible configuration options.

new Awesomplete(inputElement,{

    // min chars to trigger the autocomplete
    minChars: 2,

    // max number of items to show
    maxItems: 10,

    // auto selects the first item
    autoFirst: false,

    // select item with Tab key
    tabSelect: false,

    // a function to handle custom data that contains labels and values.
    data: function (item, input) {
      return { label: item.name, value: item.id };
    },

    // a function to determine how to filter items
    filter: function (text, input) {
      return text.indexOf(input) === 0;
    },

    // a function to sort the results
    sort: false,

    // a function to generate a container for the awesomplete
    container: function (input) {
      return $.create("div", {
        className: "awesomplete",
        around: input
      });
    },

    // a function to generate items
    item: function (text, input, item_id) {
      var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
      return $.create("li", {
        innerHTML: html,
        "role": "option",
        "aria-selected": "false",
        "id": "awesomplete_list_" + this.count + "_item_" + item_id
      });
    },

    // a function to replace values
    replace: function (text) {
      this.input.value = text.value;
    },

});

10. API methods.

// open the suggestion popup
instance.open();

// close the suggestion popup
instance.close();

// highlight the next item
instance.next();

// highlight the previous item
instance.previous();

// highlight a specific item
// -1 to deselect all
instance.goto(i);

// select the currently highlighted item
instance.select();

// evaluate the current state of the widget and regenerate the list of suggestions or close the popup if none are available. 
// You need to call it if you dynamically set list while the popup is open.
instance.evaluate();

// destroy the instance
instance.destroy();

You Might Be Interested In:


Leave a Reply