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.
autocomplete-plugin

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.

<input type="text" id="country" />

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.

DEMO | DOWNLOAD

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.

Parameter Description Default
onSelect This method will be called when user choose an item in autocomplete. The selected item will be passed as first parameter. -
input DOM input element must be passed with this parameter and autocomplete will attach itself to this field. Selectors are not supported, but you can just use document.querySelector('...') to find the required element. -
minLength Specify the minimum length, when autocomplete should appear on the screen. 2
emptyMsg The message that will be showed when there are no suggestions that match the entered value. undefined
render This method allows you to override the rendering function. It will be called for each suggestion and the suggestion object will be passed as first parameter. The current input field value will be passed as second parameter. This function must return a DIV element or undefined to skip rendering. undefined
renderGroup The same as render, but will be called for each group. The first parameter of the function will be the group name. The current input field value will be passed as second parameter. This function must return a DIV element or undefined to skip rendering. undefined
className The autocomplete container will have this class name if specified. undefined
fetch This method will be called to prepare suggestions and then pass them to autocomplete. The first parameter is the text in the input field. The second parameter is a callback function that must be called after suggestions are prepared with an array as parameter. -
debounceWaitMs Enforces that the fetch function will only be called once within the specified time frame (in milliseconds) and delays execution. This prevents flooding your server with AJAX requests. 0

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.