jquery - 使用 jQuery Select2 隐藏搜索选项

Question

我正在使用 Select2 插件，但我这辈子都弄不明白。

基本上我所做的是允许用户从颜色列表中选择 5 种颜色和“其他”选项。因此，显示了 10 种左右的颜色，并在底部显示了选择“其他”的选项。这些“其他”选项在选择时绑定(bind)了一个颜色选择器，因此用户可以选择其他颜色。

现在，我允许他们这样做的唯一方法是创建 5 个选项，所有选项都具有名称“其他”，这样用户可以根据需要选择其他 5 次。我的问题是当用户开始在搜索框中键入查询时，我无法正确隐藏不是第一个显示的“其他”选项。

我正在这样做，正常结果是这样打开的

$('.multi-select').select2('misc options').on("select2:open", function () {
    $('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').hide();
    $('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').show();
});

但是，当我像这样将相同的函数绑定(bind)到搜索输入元素的变化时

$('.select2-search__field').on('keyup', function () {
    $('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').css({
           'display': 'none',
           'opacity': 0
     });
     $('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').css({
           'display': 'block',
           'opacity': 1
     });
});

如果 Select2 认为由于窗口空间限制，结果显示在上面是合适的，那么除了顶部的“其他”选项之外，我还看到了元素的疯狂闪烁。

闪烁可归因于插件将显示事件绑定(bind)到对象的“keydown”(和“keypress”)上，因此我对同一触发器的绑定(bind)被覆盖，使我绑定(bind)到“keyup”使框显示在按键和释放之间。

我并没有修改插件来执行此操作，但是我无法弄清楚我需要在插件内部编辑什么才能使其正常工作。

---

杂项。我尝试过的事情包括设置一个 css 选择器，使每个 Select2 对象的第一个框始终包含“其他”，但是没有用于诸如“:contain”之类的东西的 css 选择器。

将类应用于 <li></li> Select2 创建的那个指定它是否是一个“其他”选项，但这由插件控制，所以我无法控制它。

Answer 1

与其修改“其他”结果来实现您正在寻找的结果，我建议您结合使用 select2:select事件和 maximumSelectionLength选项。

因此，您将从包含默认颜色列表和一个“其他”选项的标记开始。

<select multiple="multiple">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="custom">Other</option>
</select>

请注意，我已经设置了 value对于 custom 的“其他”选项，你可以选择任何你想要的，只要它不会与颜色冲突。这只是将用于确定何时显示颜色选择器的“标志”选项。

为了最终将可以进行的选择数量限制为仅五种颜色，您可以使用 maximumSelectionLength 初始化 Select2选项设置为 5 .这将告诉 Select2 只允许五个选择，你可以找到一个例子 in the documentation .

var $element = $("select").select2({
  maximumSelectionSize: 5
});

现在您已经限制了选择的数量，我们可以继续通过“其他”选项来实现颜色选择器。我们可以通过监听 select2:select 来检测何时选择了“其他”选项。选项，只要选择一个选项就会触发。

$element.on("select2:select", function (evt) {
  // handle the "Other" option
});

从那里您需要专门检测“其他”选项，因此我们可以检查通过 select2:select 传入的数据对象id 的事件的 custom ，这是我们之前设置的。由于您希望让选择多种自定义颜色的选项保持打开状态，我们将在选择“其他”选项时立即取消选择它。

function (evt) {
  // check for the custom id
  if (evt.params.data.id === 'custom') {
    // unselect the element, so other custom colors can be picked
    evt.params.data.element.selected = false;

    // update the selection
    $(this).trigger('change');
  }
}

从那里开始，您需要实现用户可以选择颜色的部分。为此，我只使用了 prompt。要求颜色。因为prompt是同步的，我们可以等待给出选择。但是您的颜色选择器很可能是异步的，因此您可能必须将其余部分放在不同的事件处理程序中。

// prompt the user for a color somehow
var color = prompt("Pick a color, any color");

选择颜色后，您将需要创建自定义 <option selected>为了它。这是为了将值发送到服务器，这样 Select2 就可以知道选择了什么颜色。

// create a new option
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option
var option = new Option(color, color, null, true);

而您需要做的就是将其添加到原始 <select> 中并触发 change它上的事件，以便 Select2(和其他组件)知道该值已更改。

// add the option to the original select, before the "Other" option
$(option).insertBefore(evt.params.data.element);

// update the selection
$element.trigger('change');

现在 Select2 将显示新的自定义颜色以及已做出的任何其他选择。用户还可以通过多次选择“其他”选项来选择其他颜色。

所以，将它们放在一起可以得到以下代码

var $element = $("select").select2({
  maximumSelectionLength: 5
});

$element.on('select2:select', function (evt) {
  // check for the custom id
  if (evt.params.data.id === 'custom') {
    // unselect the element, so other custom colors can be picked
    evt.params.data.element.selected = false;

    // update the selection
    $(this).trigger('change');

    // prompt the user for a color somehow
    var color = prompt("Pick a color, any color");

    // create a new option
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option
    var option = new Option(color, color, null, true);

    // add the option to the original select, before the "Other" option
    $(option).insertBefore(evt.params.data.element);

    // update the selection
    $element.trigger('change');
  }
});

您可以在以下 jsbin 中进行实时测试:http://jsbin.com/beluximesi/1/edit?html,js,output