Question

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

我尝试传递allowClear属性，虽然它确实显示了＆＃39; X＆＃39;，但该按钮不起作用且选择仍然存在。

编辑：

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

Answer 1

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

更新后的代码如下：

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

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

关于此插件需要placeholder这一事实，a section of the documentation专门针对此问题，但目前尚未得到答复......

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

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

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

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

问题记录在their 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)
});

Answer 2

您可以使用select2:unselecting事件，以便当用户点击X时，所选的值将被删除，并且不再打开select2面板：

＆＃13;

$(function () {
  $('#members').select2({
    placeholder: "Select a member",
    minimumInputLength: 3,
    allowClear: true
  });

  // when you click on the X....
  $('#members').on('select2:unselecting', function(e) {
    // prevent the default action
    e.preventDefault();
    
    // deselect....
    $('#members').val('');
    
    // inform select2 of deselecting....
    $('#members').trigger('change.select2');
  })
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="members" style="width: 100%;">
    <option value="">&nbsp;</option>
    <option value="300001">Daniel Akaka Kahikina</option>
    <option value="300002">Lamar Alexander</option>
    <option value="300003">Wayne Allard A.</option>
    <option value="300004">George Allen Felix</option>
    <option value="300005">John Smith</option>
</select>

＆＃13;

Select2使用minimumInputLength时清除选择

2 个答案: