Very lightweight and powerful autocomplete suggester written in vanilla JS

July 28, 2019 No comments autocomplete Vanilla JS JS Library GitHub Projects

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);
    }
});
{{ message }}

{{ 'Comments are closed.' | trans }}