Fast and lightweight autocomplete library without dependencies

In this tutorial I am going to share simple javascript library to integrate auto complete feature in you text field. It is very small autocomplete JavaScript library that allows the users to quickly select an option item from a group-enabled suggestion dropdown list.

Libraries

directly include the JavaScript and CSS file on the webpage

<link rel="stylesheet" href="autocomplete.css">
<script src="autocomplete.js">script>

HTML

Create simple input field where you need to apply autocomplete feature.

Define an array of suggestions in the JavaScript that will be fetched by the plugin via AJAX requests.

var countries = [
    { label: 'United Kingdom', value: 'UK' },
    { label: 'United States', value: 'US' }
];

Initialize the plugin on an input field and fetch the data you defined in the previous step. Note that you can also use AJAX requests instead of preloaded data

autocomplete({
    input: document.getElementById("country"),
    fetch: function(text, update) {
        text = text.toLowerCase();
        // you can also use AJAX requests instead of preloaded data
        var suggestions = countries.filter(n => n.label.toLowerCase().startsWith(text))
        update(suggestions);
    },
    onSelect: function(item) {
        alert(item.value); // will display 'US' or 'UK'
    }
});

See live demo and download source code.

This awesome plugin is developed by kraaden. Visit their official github repository for more information and follow for future updates.

List of options you can use to customize your autocomplete/autosuggest plugins.

Related