Advanced Feature-rich Autocomplete JavaScript Library – awesomplete

Category: Form , Javascript , Recommended | May 19, 2020
Views Total:3,239 views
Official Page:Go to website
Last Update:May 19, 2020


Advanced Feature-rich Autocomplete JavaScript Library – awesomplete


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">

5. Or in an HTML list.

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">

6. Initialize the library manually.

<input id="demo" data-list="#mylist" />
<ul id="mylist">
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: "", value: "Com" }
// or
new Awesomplete(myAutocomplete, {
    list: [
      ["CSSScript", "CSS" ],
      ["JavaScript", "Script" ],
      ["", "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();"GET", "/path/to/data/", true);
ajax.onload = function() {
  var list = JSON.parse(ajax.responseText).map(function(i) { return; });
  new Awesomplete(document.querySelector("#example"),{
      list: list 

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:, value: };
    // 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;
// close the suggestion popup
// highlight the next item;
// highlight the previous item
// highlight a specific item
// -1 to deselect all
// select the currently highlighted item;
// 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.
// destroy the instance

You Might Be Interested In:

Leave a Reply