Select2使用minimumInputLength时清除选择

Question

我有一个选择输入字段,我正在使用Select2 jQuery插件增强.我传递了minimumInputLength属性,让用户在填充匹配项之前键入几个字母.但是,如果需要,我不确定用户如何清除选择.

我试图传递allowClear属性,虽然它确实显示'X',但按钮不起作用,选择仍然存在.

编辑:

jsfiddle link: https://jsfiddle.net/8f1u48et/

Answer 1

placeholder初始化Select2 jQuery插件时需要定义一个属性.它是插件所必需的.

更新的代码如下所示:

$('#members').select2({
  minimumInputLength: 3,
  allowClear: true,
  placeholder: ''
});

你可以在这个JSFiddle上查看一个工作示例.选择了某些内容后,单击清除按钮将删除当前选择.

关于placeholder这个插件需要的事实,有一个专门针对这个问题的文档部分,但目前还没有得到答复......

如果您需要更多地控制正在进行的操作,则可以在文档中找到Select2将在组件生命周期中触发的事件列表.

例如,要将侦听器附加到在unselecting删除选择之前触发的事件(例如,当您单击清除按钮时),您将使用:

$('#members').on('select2:unselecting', function (evt) {
  // Do something...
});

还有一个烦人的错误,当清除和删除选择时,Select2将错误地切换下拉菜单.

该问题记录在他们的Github上,但尚未关闭和修复.此线程中提供了许多变通方法,例如取消select2:opening/closing事件发生后立即发生的select2:unselect事件:

var $element = $('#members');

$element.on('select2:unselect', function() {
  function cancelAndRemove(event) {
    event.preventDefault()
    removeEvents()
  }
  function removeEvents() {
    $element.off('select2:opening', cancelAndRemove)
    $element.off('select2:closing', cancelAndRemove)
  }
  $element.on('select2:opening', cancelAndRemove)
  $element.on('select2:closing', cancelAndRemove)
  setTimeout(removeEvents, 0)
});