Very lightweight and powerful autocomplete suggester written in vanilla JS

1. Introduction

In this article we will present a powerful autocomplete component written in a plain JavaScript.

Autocomplete suggester vanilla js

2. Features

Very Lightweight script: 5.4 kB of JavaScript - less than 2.4 kB gzipped,
Written in vanilla JavaScript, no dependencies required,
Flexible data source,
Implemented caching, delay and minimum character configuration,
Callbacks available.

This software is released as Open Source under the MIT License.

3. Links

Demo

Download

Documentation

4. How to install

Put auto-complete.min.js file just before closing body tag and stylesheet auto-complete.css in head section.

Library accepts key/value pairs, and can be bind to any input field.

// initialize autoComplete component
var my_autoComplete = new autoComplete({key1: value1, key2: value2});

// destroy
my_autoComplete.destroy();

5. Usage example

HTML

 <input id="languages" autofocus type="text" name="q" placeholder="Programming languages ..." style="width:100%;max-width:600px;outline:0">

JS

var demo1 = new autoComplete({
    selector: '#languages',
    minChars: 1,
    source: function(term, suggest){
    term = term.toLowerCase();
    var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
    var suggestions = [];
    for (i=0;i<choices.length;i++)
        if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
        suggest(suggestions);
    }
});