Remote search

Using Choices for a while and now I want to implement remote search. The list of users is over 100k, so external load and search is needed.

But it loses focus on every keystroke when typing. Please see jsfiddle example: https://jsfiddle.net/8zn132go/9/

var config = {
  'searchResultLimit': 15,
  'searchChoices': false
};
var select = document.getElementById('users');
var choice = new window.Choices(select, config);
select.addEventListener('search', function(event) {
    if (event.detail.value) {
        choice.setChoices(function(callback) {
            return fetch(
                // below api is only used for this example. it doesn't support query filtering, but its returns some data. 
                'https://randomuser.me/api/?results=20&q=' + event.detail.value
            )
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                return data.results.map(function(user) {
                    return { value: user.login.uuid, label: user.name.first };
                });
            });
        })
    }
});

[jshjohnson]

This looks like a bug - will look into this 👍

[rizkhal]

I solved it with simple code below

let choice = new Choices(element);
element.addEventListener('search', async (e) => {
    let data = await doSearch(e.detail.value);
    .then(res => {
        return res.json();
    });

    choice.setChoices(data, 'value', 'label', true);
});