jquery - 当 Select2 使用minimumInputLength 时清除选择

Question

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

我尝试传递 allowedClear 属性，虽然它确实显示“X”，但该按钮不起作用并且选择仍然存在。

编辑:

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

Answer 1

初始化 Select2 jQuery 插件时，您需要定义一个 placeholder 属性。这是插件所必需的。

更新后的代码如下所示:

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

您可以在 this JSFiddle 上查看工作示例。选择某些内容后，单击清除按钮将删除当前选择。

关于此插件需要占位符这一事实，有a section of the documentation致力于这个问题，但目前尚未得到解答...

如果您需要对正在发生的事情进行更多控制，可以在 the documentation 中找到 Select2 在组件生命周期期间将触发的事件列表。 。

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

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

还有一个恼人的错误，即 Select2 在清除和删除选择时会错误地切换下拉菜单。

此问题记录在 their Github 上但尚未关闭和修复。此线程中提供了许多解决方法，例如取消在 select2:unselect 事件之后立即发生的 select2:opening/looking 事件:

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)
});