Prevent dropdown from being opened if certain condition is not met

380 views Asked by At

I am using selectize.js to provide some suggestions while the user enters a query in a textbox. However, I would like to prevent the dropdown from being opened if certain conditions are not met. I'm aware of the onDropdownOpen callback, but it seems that the event can't be stopped from there. The following workaround doesn't work either.

onDropdownOpen: function($dropdown) {
    // [Test some variables here]
    $dropdown.collapse();
}

Is there anyway to achieve this?

1

There are 1 answers

0
Anthony C On BEST ANSWER

This is what I tried that seems to be working https://plnkr.co/edit/DifihIuXoGkMxfdEht9L?p=preview

$(document).ready(function(){
  $('#input-tags').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    },
    onDropdownOpen: function(){
      // you can add your logic here to conditionally close the drop down
      this.close(); 
      // I had to set it to false because when it is true, this will run into infinite loop since while the input is in focus, it will trigger to open the drop down.
      this.settings.openOnFocus = false;
    }
});
});