Show dropdown until typing

How Do I...
#1

Hi, anyone knows the way, to show up dropdown until typing begins??

For now, exist the option minimumInputLength but if i use that option the dropdown appears with a hint: “Please enter n or more characters”.

I don’t want to show any messages, just:

  1. Click => Opens control with focus in search element. Don’t show dropdown.
  2. Start typing => Show dropdown and results are filtered as you type

Thanks! i hope this can be resolve.

#2

As you noted, if you set the minimumInputLength option, then simply clicking on the Select2 will open the dropdown but not display any results. However, it will display a message instructing the user to enter the required minimum characters, and as far as I can tell there is no option not to display this message.

You can also use a custom matcher function to control what is displayed in the dropdown. If your custom matcher returns null when there is no query term, then no data items will appear in the dropdown. However, Select2 will display a “No results found” message in the dropdown. Again, I haven’t found a programmatic way to disable that message, though you could probably use the custom matcher to set a class on some element in the DOM (e.g., the body) that you could then use to target some CSS to hide the li.select2-results__message (although you’ll need to remove that class when there is a search term).

Check out this CodePen I created (for another purpose), which I’ve modified to do what you’re asking: https://codepen.io/John30013/project/editor/Abdgnk. The “magic” is in my custom matcher (index.js, lines 35–40), and the CSS (index.scss, lines 3–5).