Lightweight Flexible Pure JavaScript Autocomplete Library

Preview:

Description:

A pure vanilla JavaScript library to provide flexible autocomplete / autosuggest dropdown to your input field as typing. Supports local data or remote source via AJAX.

Basic usage:

Add the auto-complete.css and auto-complete.js into your html page.

<link rel="stylesheet" href="auto-complete.css">
<script src="auto-complete.js"></script>

Enable the autocomplete on an input field and pass the options through an object of key/value pairs.

var demo = new autoComplete({
    selector: '#demo',
    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);
    }
});

Available settings.

// Required selector for text input field or DOM element.
selector: 'string or DOM element',
// Required callback function to connect any data source to autoComplete. 
// source(term, response)
// term: which refers to the value currently in the text input.
// response: A response callback, which expects a single argument: the data to suggest to the user. 
source: null,
// Minimum number of characters (>=1) a user must type before a search is performed.
minChars: 3,
// The delay in milliseconds between when a keystroke occurs and when a search is performed. 
// A zero-delay is more responsive, but can produce a lot of load.
delay: 150,
// offsets
offsetLeft: 0,
offsetTop: 1,
// Determines if performed searches should be cached.
cache: true,
// Custom class/es that get/s added to the dropdown menu container. 
menuClass: '',
// A function that gives you control over how suggestions are displayed. 
renderItem: function (item, search){
  var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
  return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
},
// A callback function that fires when a suggestion is selected by mouse click or pressing enter.
// onSelect(event, term, item)
onSelect: function(e, term, item){}

Destroy the autocomplete.

demo.destroy();

Changelog:

07/12/2018

• added offsetLeft/offsetTop as optional parameter for suggestions container.