Auto-complete

Description

This component will be useful to show hints while typing something in the input

Autocomplete data

To create autocomplete input widget just paste following code as is

<div class="form-autocomplete" data-autocomplete='["First example", "Second example"]'>
    <div class="form-autocomplete-input form-input">
        <input class="form-input" type="text" placeholder="Typing here...">
    </div>
</div>

Result

Other options

You may use different values which come from Javascript function or load from API

For example, the following code loads auto-complete options from a function

<div class="form-autocomplete" data-autocomplete='loadData'>
    <div class="form-autocomplete-input form-input">
        <input class="form-input" type="text" placeholder="Typing here...">
    </div>
</div>

function loadData() {
    return ['First value', 'Second value', 'Third value'];
}

Result

The following code loads auto-complete options from an API

<div class="form-autocomplete" data-autocomplete='loadDataJson'>
    <div class="form-autocomplete-input form-input">
        <input class="form-input" type="text" placeholder="Typing here...">
    </div>
</div>

function loadDataJson() {
    return fetch('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            return response.json();
        })
        .then(function (users) {
            users = users.map(function (user) {
                return user.name;
            });

            return Promise.resolve(users);
        });
}

Result

The following code loads auto-complete options from an API after input value changed

<div class="form-autocomplete" data-autocomplete data-onchange='searchData'>
    <div class="form-autocomplete-input form-input">
        <input class="form-input" type="text" placeholder="Typing here...">
    </div>
</div>

function searchData(query, item) {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            return response.json();
        })
        .then(function (users) {
            users = users.map(function (user) {
                return user.name;
            });

            users.filter(function (user) {
                return user.match(
                    new RegExp(`${query}`, 'gui')
                );
            });

            item.options = users;
            item.refresh();
        });
}

Result