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对象的第一个框包含“Other”，但是没有像“: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