Очистка автозаполнения в select2 без закрытия выпадающего меню - PullRequest
Новая
       16

Очистка автозаполнения в select2 без закрытия выпадающего меню

0 голосов
/ 20 мая 2018

Кто-нибудь знает, как иметь возможность очистить содержимое поля автозаполнения в выпадающем списке select2?На данный момент пользователь должен вернуться назад, чтобы очистить текст, что может раздражать, когда требуется несколько поисков / выборов.Простое «Х» или (если это невозможно), кнопка рядом с полем будет хорошо.Я пробовал различные комбинации .select2-search--dropdown .select2-search__field, пытаясь очистить поле поиска, но ни к чему не привел, и раскрывающийся список всегда закрывается.Скрипка показана ниже.Спасибо. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"></script>

<body class='bodyClass'>
  <div class="row">
    <select id="SteelList" name="SteelList" class="form-control select2-multiple">
      <option value="40">France</option>
      <option value="960">Spain</option>
      <option value="540">Italy</option>
    </select>
  </div>
</body>



  $(function() {

  var S2MultiCheckboxes = function(options, element) {
    var self = this;
    self.options = options;
    self.$element = $(element);
    var values = self.$element.val();
    self.$element.removeAttr('multiple');
    self.select2 = self.$element.select2({

      allowClear: true, // Puts little 'X' in top placeholder  
      //minimumResultsForSearch: -1,
      placeholder: options.placeholder,
      closeOnSelect: false,

      templateSelection: function() {
        return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length);
      },
      templateResult: function(result) {
        if (result.loading !== undefined)
          return result.text;
        return $('<div>').text(result.text).addClass(self.options.wrapClass);
      }
    }).data('select2');
    self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
      return function(evt) {
        var $this = $(this);

        var data = $this.data('data');

        if ($this.attr('aria-selected') === 'true') {
          self.trigger('unselect', {
            originalEvent: evt,
            data: data
          });
          return;
        }

        self.trigger('select', {
          originalEvent: evt,
          data: data
        });
      }
    })(self.select2));
    self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
  }

  // ------------------------

  $.fn.extend({
    select2MultiCheckboxes: function() {
      var options = $.extend({
        placeholder: 'Choose elements',
        templateSelection: function(selected, total) {
          return selected.length + ' > ' + total + ' total';
        },
        wrapClass: 'wrap'
      }, arguments[0]);

      this.each(function() {
        new S2MultiCheckboxes(options, this);
      });
    }
  });

})

// ======================================

// Init script
$(function() {
  $('.select2-multiple').select2MultiCheckboxes({

    closeOnSelect: true,

    templateSelection: function(selected, total) {
      return "Select Country - Selected " + selected.length + " of " + total;
    }

  })

});




 .bodyClass {
 min-height: 100vh;
}

.select2-results__option .wrap:before {
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
  padding-right: 10px;
}

.select2-results__option[aria-selected=true] .wrap:before {
  content: "\f14a";
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid red;
}

.row {
  padding: 10px;
}

.select2-multiple,
.select2-multiple2 {
  width: 50%
}

.select2-results__group .wrap:before {
  display: none;
}

Скрипка: https://jsfiddle.net/3hs4cf4n/

1 Ответ

0 голосов
/ 15 октября 2018

Найден ответ для очистки полей автозаполнения select2.Этот ответ не является полным ответом на ваши требования, но может помочь вам найти решение.

Чтобы очистить поле с id = "name", используйте следующий код 

$('#name').val(null).trigger('change');
...