Small Autocomplete Plugin For Input Fields – autocomplete.js

Category: Form , Javascript | November 8, 2018
Author: kraaden
Views Total: 1,526
Official Page: Go to website
Last Update: November 8, 2018
License: MIT

Preview:

Small Autocomplete Plugin For Input Fields – autocomplete.js

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/08/2018

  • initialization performance improved / scrolling bug fixed

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

Leave a Reply