Как функционально разрешить клавиши со стрелками вправо и влево с помощью Selectize select

#javascript #jquery #selectize.js

#javascript #jquery #selectize.js

Вопрос:

Привет всем, я работаю с selectize.js плагин (http://selectize.github.io/selectize.js /) с помощью выпадающего списка выбора. Когда я ввожу пользовательское значение, оно отлично добавляет его к вводимым данным, но я заметил, что когда я возвращаюсь к редактированию поля (после нажатия в другом месте страницы) Я больше не могу использовать стрелки влево и вправо для редактирования частей текста. Кроме того, кнопка удаления удаляет весь текст, а не только последний символ.

Есть ли способ предотвратить это поведение и использовать поведение по умолчанию, ожидаемое от клавиш со стрелками влево и вправо, а также кнопки удаления?

 <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>amp;hellip;</div>';
        }
      },
    });  
  

Ответ №1:

Плагин restore_on_backspace должен сделать свое дело.

 <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>amp;hellip;</div>';
        }
      },
    });