Option to hide the dropdown when query is empty

[jods4]

When the user backspaces and empties its query text, Selectize displays all the list of all available options.

(1) Sometimes this doesn't feel like a good UX, especially for AJAX autocompletes.

(2) Especially in the case of AJAX autocompletes, Selectize cache may have grown huge and sorting + displaying all options is slowing down the browser to a crawl.

[jfishbein]

+1 for this. Might try to tackle it when I get a chance.

[m272cels]

@jods4 I thought the same, this is my current workaround:

  $("#selectize").selectize({
    onDropdownOpen: function ($dropdown) {
      // Manually prevent dropdown from opening when there is no search term
      if (!this.lastQuery.length) {
        this.close();
      }
    }
  })

[jfishbein]

Thanks for this! I also had to add the following so the dropdown doesn't appear when you backspace out all that was previously typed:

onType: function (str) {
    if (str === "") {
        this.close();
    }
}

[joallard]

That boils down to "Do I want there be suggestions when the field is empty?", which I would accept a new option for.

[maslade]

@m272cels's suggestion gave me problems when configured with maxItems: 1. Using Firefox 51 and selectize.js 0.12.4, that onDropdown handler is triggering an infinite loop and crashing the tab. With maxItems > 1, it worked fine.

I worked around it by changing it to the following (in addition to @jfishbein's snippet):

onDropdownOpen: function ( \$dropdown ) {
    \$dropdown.css( 'visibility', this.lastQuery.length ? 'visible' : 'hidden' );
}

[ghost]

+1 for this

[parak80]

Hi, how can I do this in angular 7 anyone knows?
I have buttons and a menu as called kebabMenu and I want to priorotize buttons in a way that when the page become responsive the rest of the buttons go under the dropdown. I managed to do that by css query but when the dropdown is empty it also shows and its empty query. I wonder if someone can help me to check when there is no data in dropdown then hide it.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[jods4]

Don't close this, it's stale because everything about this feature has been said and it's waiting an implementation.