CODEWITHSUNDEEP
javascriptjqueryselectize.js
hotcakedev
hotcakedev

Reputation: 2514

How to make selectize option value editable?

I am using selectize v0.11.0 standalone to manage location values.

I want to edit a selected option value, but it seems not possible.

enter image description here

const $selected_location = $('select[name="location"]').selectize({
    options: [{
        value: '',
        text: 'Select location...'
    },
    {
        value: 'ms_teams',
        text: 'Microsoft Teams'
    }],
    plugins: ['restore_on_backspace'],
    placeholder: 'Select location...',
    allowEmptyOption: true,
    create: true,
    createOnBlur: true,
    onChange: function(value) {
        ...
    }
});

As you can see from the image and code, I manually added the location "Calgary AB Canada".

And I want to edit the location without adding new option.

What I tried is that I imported the plugin restore_on_backspace. It makes the selected option editable, but it doesn't still update the actual value, it is just used to filter the options.

If I edit the selected option "Calgary AB Canada" to "Toronto ON Canada" and hit enter, then it should update the selected option value without adding new one.

Upvotes: 1

Views: 612

Answers (1)

Krishna Chauhan
Krishna Chauhan

Reputation: 11

Following this link check just apply the plugins: ["restore_on_backspace"], when you initialize the selectize drop down there is the example

$("#input-tags2").selectize({
  plugins: ["restore_on_backspace"],
  delimiter: ",",
  persist: false,
  create: function(input) {
    return {
      value: input,
      text: input,
    };
  },
});

Upvotes: 1

Related Questions