Awesome

Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped.

Demo: https://smartscheduling.com/en/documentation/autocomplete

Installation

If you want to use the library in browser, just include the autocomplete.js and autocomplete.css into your HTML file.

For node.js:

npm install autocompleter

Then import it into your javascript code:

import autocomplete from "autocompleter";
// or
var autocomplete = require("autocompleter");

Getting Started

var countries = [
  { label: "United Kingdom", value: "UK" },
  { label: "United States", value: "US" },
];

var input = document.getElementById("country");

autocomplete({
  input: input,
  fetch: function (text, update) {
    text = text.toLowerCase();
    // you can also use AJAX requests instead of preloaded data
    var suggestions = countries.filter((n) =>
      n.label.toLowerCase().startsWith(text)
    );
    update(suggestions);
  },
  onSelect: function (item) {
    input.value = item.label;
  },
});

Try online

Use with Typescript and Webpack

Simply import the autocompleter in your typescript file:

import autocomplete from "autocompleter";

and call the autocomplete function as showed below:

// replace the `MyInterface` interface with the interface you want to use with autocomplete
autocomplete<MyInterface>({
    input: document.getElementById('myinputfield'),
    emptyMsg: 'No items found',
    minLength: 1,
    fetch: (text: string, update: (items: MyInterface[]) => void) => {
	...
    },
    onSelect: (item: MyInterface) => {
	...
    }
});

If your custom interface doesn't have the label property, you might get a compilation error from typescript. In this case just add an additional type to your code and pass it to the autocompleter:

import autocomplete, { AutocompleteItem } from 'autocompleter';

// this type will prevent typescript warnings
type MyItem = Item & AutocompleteItem;

autocomplete<MyItem>({
    input: document.getElementById('myinputfield'),
    emptyMsg: 'No items found',
    minLength: 1,
    fetch: (text: string, update: (items: Item[]) => void) => {
	...
    },
    onSelect: (item: Item) => {
	...
    },
    render: function(item: Item, currentValue: string): HTMLDivElement | undefined {
        const itemElement = document.createElement('div');
        itemElement.textContent = item.FirstName;
        return itemElement;
    }
});

If your interface doesn't have a label property, you also have to provide a custom render function.

Options

You can pass the following options to autocomplete:

Sample config using all options

autocomplete({
    onSelect: function(item, input) {
        alert(item.value);
    },
    input: document.getElementById('myinput'),
    minLength: 2,
    emptyMsg: 'No elements found',
    render: function(item, currentValue) {
        var div = document.createElement('div');
        div.textContent = item.label;
        return div;
    },
    renderGroup: function(groupName, currentValue) {
        var div = document.createElement('div');
        div.textContent = groupName;
        return div;
    },
    className: 'autocomplete-customizations',
    fetch: function(text, callback, trigger, cursorPos) {
        text = text.toLowerCase();
        var suggestions = [{ label: 'United States', value: 'US' }];
        callback(suggestions);
    },
    debounceWaitMs: 200,
    customize: function(input, inputRect, container, maxHeight) {
        ...
    },
    preventSubmit: PreventSubmit.Always,
    disableAutoSelect: true,
    container: document.createElement('div'),
    click: e => e.fetch(),
    keyup: e => e.fetch()
});

Display autocomplete above the input field

You can use the following snippet to display autocomplete above the input field if there is not enough space for it.

autocomplete({
    ...,
    customize: function(input, inputRect, container, maxHeight) {
        if (maxHeight < 100) {
            container.style.top = '';
            container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + 'px';
            container.style.maxHeight = '200px';
        }
    }
});

If you don't want to pass this function every time, you can also use spread operator to create your own autocomplete version with default implementation:

export default function autocompleteCustomized<T extends AutocompleteItem>(
  settings: AutocompleteSettings<T>
): AutocompleteResult {
  return autocomplete({
    ...settings,
    customize: (
      input: HTMLInputElement,
      inputRect: ClientRect | DOMRect,
      container: HTMLDivElement,
      maxHeight: number
    ): void => {
      if (maxHeight < 100) {
        container.style.top = "";
        container.style.bottom =
          window.innerHeight - inputRect.bottom + input.offsetHeight + "px";
        container.style.maxHeight = "200px";
      }
    },
  });
}

Unload autocomplete

You can call destroy method on the returned object in order to remove event handlers and DOM elements after usage:

var autocompl = autocomplete({
  /* options */
});
autocompl.destroy();

Grouping suggestions

You can display suggestions separated into one or multiple groups/categories:

var countries = [
  { label: "Canada", value: "CA", group: "North America" },
  { label: "United States", value: "US", group: "North America" },
  { label: "Uzbekistan", value: "UZ", group: "Asia" },
];

autocomplete({
  minLength: 1,
  input: document.getElementById("country"),
  fetch: function (text, update) {
    text = text.toLowerCase();
    var suggestions = countries.filter((n) =>
      n.label.toLowerCase().startsWith(text)
    );
    update(suggestions);
  },
  onSelect: function (item) {
    alert(item.value);
  },
});

Try online

Note: Please make sure that all items are sorted by the group property.

Display autocomplete when textbox is clicked by a mouse

The widget offers the ability to display an autocomplete when a user clicks on words or placeholders within a textbox:

function getWord(s, pos) {
    const n = s.substring(pos).match(/^[a-zA-Z0-9-_]+/)
    const p = s.substring(0, pos).match(/[a-zA-Z0-9-_]+$/)
    if (!p && !n) return ''
    return (p || '') + (n || '')
}
autocomplete({
    ...,
    fetch: function(text, update) {
        text = getWord(text, input.selectionStart).toLowerCase();
        var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))
        update(suggestions);
    },
    click: e => e.fetch()
});

Try online

License

Autocomplete is released under the MIT License.

Copyright (c) 2016 - Denis Taran

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.