CODEWITHSUNDEEP
javascriptjqueryselectize.js
Jeremy
Jeremy

Reputation: 554

How to allow right and left arrow key functionally with Selectize select

Hey everyone I'm working with the selectize.js plugin (http://selectize.github.io/selectize.js/) using a select dropdown. When I type in a custom value it adds it to the input just fine but I noticed that when I come back to edit the field (after clicking elsewhere on the page) I can no longer use the left and right arrows to edit parts of the text. Furthermore the delete button deletes all the text, not just the last character.

Is there a way to prevent this behavior and use the default behavior expect of the left and right arrow keys as well as the delete button?

<select class="qty-select">
<option> option 1 </option>
<option> option 2 </option>
</select>

 $('.qty-select').selectize({
        create: function(input) {
            return {
                value: input,
                text: input
            }
        },
        highlight: false,
        onChange: function() {
            var value = this.getValue();
            $('.selectize-input .item').text(value);
            $('#qty').val(value);
            checkChange($('#qty'));
        },
        render: {
        option_create: function(data, escape) {
          return '<div class="create">Buy <strong>' + escape(data.input) + '</strong>&hellip;</div>';
        }
      },
    });

Upvotes: 0

Views: 626

Answers (1)

Bas1c
Bas1c

Reputation: 76

The restore_on_backspace plugin should do the trick.

<select class="qty-select">
<option> option 1 </option>
<option> option 2 </option>
</select>

 $('.qty-select').selectize({
        plugins: ['restore_on_backspace'],
        create: function(input) {
            return {
                value: input,
                text: input
            }
        },
        highlight: false,
        onChange: function() {
            var value = this.getValue();
            $('.selectize-input .item').text(value);
            $('#qty').val(value);
            checkChange($('#qty'));
        },
        render: {
        option_create: function(data, escape) {
          return '<div class="create">Buy <strong>' + escape(data.input) + '</strong>&hellip;</div>';
        }
      },
    });

Upvotes: 0

Related Questions