About

Simple jQuery 3 plugin to enable autocomplete suggestions for inputs. Uses a JSON-based API as the datasource. Works with either plain HTML or Bootstrap form controls.

DEMO

Usage example

<label>GitHub repository search
    <input type="text" list="projects" name="project" value="">
    <datalist id="projects"></datalist>
</label>
<script>
    /* global $ */
    $(document).ready(function() {
        $("input[name='project']").autolist("https://api.github.com/search/repositories", {
            getItems: function (response) { return response.items; },
            getName: function (item) { return item.full_name; }
        });
    });
</script>

The datalist must exist and must be linked to the input field.

Options

    $("input[name='project']").autolist("https://api.github.com/search/repositories", {
        query: "q",
        minLength: 3,
        delay: 500,
        trimValue: true,
        getItems: function (response) { return response.items; },
        getName: function (item) { return item.full_name; }
    })

Name	Required	Default	Description
url	X		JSON API endpoint (without the query).
q		"q"	The query part of the JSON API call (ex. example.com/list?q=test).
minLength		3	Minimum length of the query (no suggestions will be provided if the input text is shorter).
delay		500	How long to wait between input change and autocomplete list refresh. Shorter intervals mean quicker response but more API calls.
trimValue		true	Trim the input value (don't query with start/end spaces).
getItems		(r) ⇒ r	Function to get the autocomplete items from the API result object.
getName		(i) ⇒ i	Function to get the name that will be displayed from an item.

Changelog

Version 1.0.0/1.0.1 - 2016/11/16

• initial release