Choices: Remote search

[sharkooon]

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 };
                });
            });
        })
    }
});

[daicambruzzi]

I have the same problem :/ @sharkooon did you fix the issue with any alternative?

[sharkooon]

not yet, waiting for reply.

[DoctorOak]

Hitting the exact same problem and this is the specific functionality I need the plugin for...

I tried putting a timeout throttle around firing the request in my code but it just caused even more problems. I'm assuming a lack of any kind of throttle within the core code itself might be the problem but I've not really got the time to look into it.

Until this can be solved, I'm going to have to revert to Select2, which is a pity.

[jshjohnson]

This looks like a bug - will look into this 👍

[sharkooon]

any updates? otherwise i have to implement Selectize

[bjornpost]

@sharkooon did you find a solution for this/did you investigate further? Was your code example working in a previous version of Choices?

[sharkooon]

Don't know if it worked in previous versions.. and did not found a solution for it, i used Selectize now.

[Raidri]

@jshjohnson I think just set
this.input.element.focus();
at line 356 in the enable function should solve the problem. In my test the focus still on the input element

[medeirosrafael]

I had same problem..
I solved calling .focus() on my input, like @Raidri suggested..

My code:

 myInput.addEventListener('search', (event) => {
      myChoice.setChoices(async () => {
        return this.doSearch(event.detail.value);
      })
      .then(() => {
          event.target.parentNode.querySelector('input').focus();
         });
    });

[WhyNotHugo]

@medeirosrafael Using that approach I still get a small freeze after every keystroke. Have you managed to work around that?

[medeirosrafael]

@WhyNotHugo i get no freezing behavion on keystroke with this code.. are you fetching data from remote source?

[WhyNotHugo]

Yes, I'm using fetch to load my data. It's form localhost, so it's just a few dozen milliseconds, but it's very intrusive when typing, since keys pressed during the freeze are ignored.

[medeirosrafael]

Ok.. are you using any debounce approach?
If not, you can do it with setTimeout, like:

let myTimeOut = null;
 myInput.addEventListener('search', (event) => {
      clearTimeout(myTimeOut);
      myTimeOut = setTimeout(() => { 
             myChoice.setChoices(async () => {
               return this.doSearch(event.detail.value);
              })
              .then(() => {
                      event.target.parentNode.querySelector('input').focus();
            });
         }, 600);

    });

Reference: #162