Clear choices on search

[vegarringdal]

Wanted to use this with remote data, Im prb just using it wrong
But what I wanted to repopulate the dropdown when trying into the search box
Nothing have to be changed without user selection a row
Thx

      this.Choices = new choises(this.element,{
      callbackOnChange : (value) => {
          //this triggers, ok
      },
      callbackOnSearch : (value)=>{
        //this triggers, but setvalue cant be used, it just adds all the time, and set input value to one of the rows
//tried setChoises to but nothing happend

      }
    });

[vegarringdal]

my bad, setChoises worked, sorry 😄

[vegarringdal]

Looks like I have a issue after all
when I use setChoises it also adds, didnt notice before I removed the text in search bar
How can I make it so its always replace the existing with setChoises

[jshjohnson]

Just to clarify, are you wanting to set the choices based on what a user is searching for?

Thanks

[vegarringdal]

Yes, and every time the "callbackOnSearch" triggers I call the server, and set the choises

[jshjohnson]

Ahh I understand. There is a method to clear choices but it is a private function - I'll make it public for you tomorrow!

[vegarringdal]

great thx.

A option to the setChoises could have been a solution to
setChoices(choices, value, label, replaceChoises) if true if replaces the existing.

Is it possible to have one label for the dropdown and another one for the label that get set?
Was thinking about using the callbackOnCreateTemplates, but looks like you cant pass additional data inn with setChoises() and use them

setChoices([
            {value: 'One', label: 'Label One', otherLabel:"something else"},
            {value: 'Two', label: 'Label Two', otherLabel:"something else"},
            {value: 'Three', label: 'Label Three',otherLabel:"something else",},
        ], 'value', 'label');

callbackOnCreateTemplates: function (instance, template) {
      var classNames = instance.config.classNames;
      return {
        item: (data) => {
          return template(`
            <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
              <span>&bigstar;</span> ${data.label}
            </div>
            `);
        },
        choice: (data) => {
          return template(`
            <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
                <span>&bigstar;</span> ${data.label} ${data.otherLabel}
              </div>
            `);
        },
      };

[jshjohnson]

Hi @vegarringdal,

As of version 2.3.1, it is now possible to pass a replaceChoices flag when using the setChoices method. See: https://github.com/jshjohnson/Choices#setchoiceschoices-value-label-replacechoices

I'm going to look into passing additional data for templates in the future!

Thanks

[vegarringdal]

@jshjohnson Thx

Other options that could be useful was maybe a searchTimeout, so search dont get triggered to fast if someone if writing fast.
Also maybe a minimum dropdown size could be a nice feature, or function we could call to set before we setChoices, could calculate size we needed depending on result length.