vanilla-js-autocomplete v1.5.0

vanilla-js-autocomplete

Autocomplete, which you can configure as accurately as possible to fit your needs. You yourself describe his behavior. You can implement any scenario of the autocomplete.

Advantages:

• a lightweight and powerful on pure JavaScript
• does not set you any framework due to internal code implementation
• fit at billion cases

Install

npm i vanilla-js-autocomplete

or

yarn add vanilla-js-autocomplete

Get started

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

<input type="text">

const data = ['Moscow', 'Hong Kong', 'Monaco', 'Tokyo', 'Minsk'];

const input = document.querySelector('input[type=text]');

JcAutocomplete.create(input, {
    minChars: 1,
    source: (term, response) => {
        const re = new RegExp(term, 'iu');
        const result = data.filter(item => item.match(re));

        if (result) {
            response(result);
        }
    }
});

For more examples

See example/*.html

• fetch from local data
• fetch from remote data
• in body with position - static
• mentions (also custom items and insert value)
• not found case

Default params

const defaults = {
    minChars: 3,
    delay: 150,
    offsetLeft: 0,
    offsetTop: 1,
    changeValue: true,
    containerClass: 'autocomplete-dropdown',
    itemClass: 'autocomplete-item',
    createContainer: function () {
        const container = document.createElement('div');

        container.style.display = 'none';
        container.classList.add(this.containerClass);

        document.body.appendChild(container);

        return container;
    },
    source: function (term, response) {
    },
    renderItem: function (item, search) {
        search = search.replace(/[^\w\s]/g, '\\$&');
        const re = new RegExp(`(${ search.split(' ').join('|') })`, 'gi');

        return `<div class="${ this.itemClass }" data-val="${ item }">${ item.replace(re, '<mark>$1</mark>') }</div>`;
    },
    onSelect: function (event, term, item) {
    }
};

Options