Very lightweight and powerful autocomplete suggester written in vanilla JS

October 23, 2018 No comments autocomplete Vanilla JS JS Library GitHub Projects

Powerful autocomplete plugin written in plain JavaScript. Autocomplete vanillajs lightweight suggester


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.

Demo

Download

Documentation

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();

Example usage

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 }}