Small Autocomplete Plugin For Input Fields – autocomplete.js

Preview:

Description:

A very small autocomplete JavaScript library that allows the users to quickly select an option item from a group-enabled suggestion dropdown list.

Install it via NPM:

$ npm install autocompleter

How to use it:

Import the autocompleter into your project.

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

Or directly include the JavaScript file on the webpage:

<script src="autocomplete.js"></script>

Don’t forget to include the required stylesheet that will provide the primary CSS styles for the autocomplete list.

<link rel="stylesheet" href="autocomplete.css">

Define an array of suggestions in the JavaScript that will be fetched by the plugin via AJAX requests.

var languages = [
    { label: 'JavaScript', item: 'JS' },
    { label: 'CSS 2 and 3', item: 'CSS' }
    ...
];

Initialize the plugin on an input field and fetch the data you defined in the previous step.  Note that you can also use AJAX requests instead of preloaded data

autocomplete({
  input: document.getElementById("yourInput"),
  fetch: function(text, update) {
    text = text.toLowerCase();
    var suggestions = languages.filter(n => n.label.toLowerCase().startsWith(text))
    update(suggestions);
  }
});

If you’d like to categorize your suggestions in different groups.

var languages = [
    { label: 'JavaScript', item: 'JS', group: 'group-1' },
    { label: 'CSS 2 and 3', item: 'CSS', group: 'group-2' }
    ...
];

More configuration settings:

autocomplete({
  input: document.getElementById("yourInput"),
  fetch: function(text, update) {
    text = text.toLowerCase();
    var suggestions = languages.filter(n => n.label.toLowerCase().startsWith(text))
    update(suggestions);
  },
  // The minimum length, when autocomplete should appear on the screen
  minLength: 2,
  // The message that will be showed when there are no suggestions that match the entered value.
  emptyMsg: '',
  // The autocomplete container will have this class name if specified.
  className: '',
  // Called when user choose an item in autocomplete. The selected item will be passed as first parameter.
  onSelect: null,
  // This method allows you to override the rendering function. 
  // It will be called for each suggestion and the suggestion object will be passed as first parameter. 
  // This function must return a DIV element or undefined to skip rendering.
  render: null, 
  // The same as render, but will be called for each group. 
  // The first parameter of the function will be the group name. 
  // This function must return a DIV element or undefined to skip rendering.
  renderGroup: null
});

Changelog:

11/23/2018

• make sure maxHeight is always positive

11/22/2018

• initialization performance improved / scrolling bug fixed
• pass `false` to the fetch function
• fixed pos

11/02/2018

• fixed default export issue

10/26/2018

• small refactoring

10/23/2018

• use local doc variable instead of document

10/11/2018

• fixed wrong position calculation

10/10/2018

• use documentFragment to speed up autocompleter when large lists are used

08/07/2018

• label is optional now, because it is not required for custom rendering

08/06/2018

• added a new parameters to pass the current value to rendering functions

08/03/2018

• improvements & added event handler for scrolling