Search code examples
tokenize2

Is it possible to show all options in Tokenize2?

Tokenize2 is a javacsript lib to select multiple options.

It provides a very neat UI to start writing and then get a list of options to select from. Selected options will show up as "tags" that can be removed with "x" link.enter image description here

So far all is fine. But Right now you need to know what your looking for and start write at least one character to see matching alternatives.

In my scenario there are very few alternatives and they are not known to the user. I would like to show ALL options when the user clicks the input box. There is a configuration option named searchMinLength but it is already set to 0.

Is there a workaround that can be used? Maybe like triggering load and dropdown manually?

I know there are a lot of similar alternatives but I picked Tokenize2 because:

  • It looks clean and nice
  • It works in mobile browsers
Solution

  • I don't know if there is an "official" approach, but after some investigation I have found an acceptable workaround.

    After downloading the Tokenizer2 sourceode I found the following line that triggered my attention:

    if(this.input.val().length > 0){
    this.trigger('tokenize:search', [this.input.val()]);
}

    My interpretation is that the internal search command is not triggered unless the user input has at least one character. This line in sourcecode could easily be modified. I have filed a suggestion for this here: https://github.com/zellerda/Tokenize2/issues/26

    My current workaround is to add an event listener for the select event and there trigger the internal search command. That works fine for my scenario and does not force a source code rewrite.

    $("#my-dropdown").on("tokenize:select", function (e: Event, routedEvent: boolean) {
    $("#my-dropdown").trigger('tokenize:search', "");
});