Simple Accessible Autocomplete With Asynchronous Data Fetch for Vanilla Javascript

How to make use of it:

1. Download and import the autocomplete.css & autocomplete.min.js into the doc.

<link rel="stylesheet" href="/path/to/autocomplete.css" />
<script src="/path/to/autocomplete.min.js"></script>

2. Load the polyfills for customers who’re nonetheless utilizing the legacy browsers.

if (!('Promise' in window)) {
  var script = document.createElement('script');
  script.src =
    'https://polyfill.io/v3/polyfill.min.js?features=Promise%2CElement.prototype.closest';
  document.getElementsByTagName('head')[0].appendChild(script);
}

3. Initialize the autocomplete.js on the goal input subject and fetch information from an exterior information supply as follows:

<input type="text" id="example" placeholder="Type Something" />

new Autocomplete('example', {
    onSearch: ({ currentValue }) => {
      const api = `/path/to/datasource/`;
      return new Promise((resolve) => {
        fetch(api)
          .then((response) => response.json())
          .then((data) => {
            resolve(data);
          })
          .catch((error) => {
            console.error(error);
          });
      });
    },
    onResults: ({ matches }) => {
      return matches
        .map(el => {
          return `
            <li>${el.name}</li>`;
        }).join('');
    }
});

4. The library additionally helps native information.

new Autocomplete('local', {
    onSearch: ({ currentValue }) => {
      const data = [
        { "name": "JavaScript" },
        { "name": "CSS" },
        { "name": "HTML" },
        { "name": "Python" }
      ];
      return data.sort((a, b) => a.name.localeCompare(b.name))
        .filter(element => {
          return element.name.match(new RegExp(currentValue, 'i'))
        })
    },
    onResults: ({ matches }) => {
      return matches
        .map(el => {
          return `
            <li>${el.name}</li>`;
        }).join('');
    }
});

5. Possible choices and features.

new Autocomplete('example', {

    // search delay
    delay: 500,

    // shows clear button
    clearButton: true,

    // auto select the first result
    selectFirst: false,

    // adds text to the input field as you move through the results with the up/down cursors
    insertToInput: false,

    // the number of characters entered to trigger the search
    howManyCharacters: 1,

    // name of the class by which you will name the group element
    classGroup: 'group-by',

    // disable close on select
    disableCloseOnSelect: false,

    // determine whether to cache characters entered in the input field
    cache: false,

    onResults = () => { },
    onSearch = () => { },
    onSubmit = () => { },
    onOpened = () => { },
    onReset = () => { },
    noResults = () => { },
    onSelectedItem = () => { },

});

Configuration of the plugin

Powerful Autocomplete With Asynchronous Data Fetch, autocomplete Plugin/Github

See Demo And Download