Overwriting default selection in Selectize dropdown list

Question

I recently modified a webpage to replace a non-user-friendly search control with a Selectize Single Item Select.

But I'm having one little UI annoyance. When you click on the control and then try typing in a new selection, nothing happens; it still has the default option. You first have to press Backspace to delete the default selection, and then you can enter a new search.

How can I make typing immediately overwrite the default option, without having to press Backspace?

Here's a short HTML example that demonstrates the issue:

<!DOCTYPE html>
<html>
   <head>
      <title>Selectize Example</title>
      <link rel="stylesheet" href="Selectize/css/selectize.css">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script type="text/javascript" src="Selectize/js/standalone/selectize.js" type="text/javascript"></script>
   </head>
   <body>
      <select name="Manufacturer" id="Manufacturer" class="selectize">
          <option value="ALL" selected>All Manufacturers</option>
          <option value="1">Acme Corp.</option>
          <option value="2">Contoso Ltd.</option>
          <option value="3">Electronic, Inc.</option>
      </select>
      <script type="text/javascript">
         $(".selectize").selectize({create: false})
      </script>
   </body>
</html>

I played with this on jsfiddle and seems the only (easyest & fastest) way would be to empty the input on focus and set it back to its default if nothing is selected/entered. Still a cheap solution, anyway... — phaberest
– phaberest, Commented Feb 12, 2016 at 20:52

phaberest · Accepted Answer · 2016-02-12 21:18:35Z

1

I did it on the go, it surely needs improvements, but at least it works as expected.

Edit your javascript as follows:

$(".selectize").selectize({
    create: false,
    onDropdownOpen: function(dropdown) {
        var that = $(dropdown).prev().find('.item');

        // If the default option is selected, we empty the div acting as input.
        if(that.data('value') == 'ALL') {
            that.html('');
        }
    },
    onDropdownClose: function(dropdown) {
        var that = $(dropdown).prev().find('.item');

        // If nothing was selected, we restore initial value
        if(that.data('value') == 'ALL') {
            that.html('All Manifacturers');
        }
    },
});

I made a little jsfiddle too, check it.

It is quite self explanating, anyway it checks the value selected when the dropdown shows up, then again when it disappear and do the logic only if the selected value is the default.

answered Feb 12, 2016 at 21:18

phaberest

3,2203 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dan04 Over a year ago

For some reason, that.html('') disables the search functionality. But changing those two lines to use this.clear and this.setValue got it working again. Thanks for pointing me in the right direction!

Binh Nguyen · Accepted Answer · 2016-07-19 09:12:50Z

Just recently, I used selectize.js v0.12.2 (with Django form and initial select options were set from that form) and had a much similar problem: The select box always makes the first option its default selected option and always displays that default selected one upon initialization. Then, with single item select, it does not matter much because when we select another option, the default one will go away, but with multiple-item select, it is an annoyance that we have to hit backspace to remove the default selected option.

I have found out the solution: set items:null in the script:

$(".selectize").selectize({
  create: false,
  maxItems: 3,
  plugins: ['remove_button'],
  items: null,
  delimiter: ',',
  persist: false,
});

By the way, you can set selectize placeholder, for example to set it directly in the html file: <select name="Manufacturer" id="Manufacturer" class="selectize" placeholder="Select a manufacturer..."> . That placeholder text will be displayed whenever there is no selected option.

Hope this helps to anyone having a similar problem.

Collectives™ on Stack Overflow

Overwriting default selection in Selectize dropdown list

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related