Selectize.js: Option to hide the dropdown when query is empty

Created on 10 Mar 2016 · 9Comments · Source: selectize/selectize.js

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.

enhancement input component pending review

Source

jods4

Most helpful comment

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

jfishbein on 30 Mar 2016

👍6

All 9 comments

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

jfishbein on 21 Mar 2016

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

m272cels on 30 Mar 2016

👍5

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

jfishbein on 30 Mar 2016

👍6

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

joallard on 1 Apr 2016

👍2

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

maslade on 29 Mar 2017

+1 for this

ghost on 15 Jun 2017

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.