Advanced Feature-rich Autocomplete JavaScript Library – awesomplete

Preview:

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();