javascript - 如何在搜索过滤后选择 jQuery Chosen 多选中的所有选项？

Question

标题几乎说明了一切。

我在一个页面上有几个选择框，它们都是在 ASP.NET 网络表单中动态生成的，有些有数百个选项。我希望能够输入搜索字符串，然后选择所有匹配的条目。

在基本选择控件上使用 javascript 然后调用 $('#control-id').trigger('chosen:update'); 很容易全选和取消全选，但我在尝试仅选择与搜索过滤器匹配的选项时遇到问题。

对于如何完成这项工作，我并不挑剔，无论是使用“全选”选项、额外的按钮还是击键。这是一个后端开发专用页面，因此 UI 不必 100% 直观。

Answer 1

我最终通过更改所选插件并将以下代码添加到 AbstractChosen.prototype.keyup_checker 来解决此问题:

case 65:
  if (evt.ctrlKey && this.results_showing) {
    if (typeof onSelectAll == 'function') {
       onSelectAll($(this.container).attr('id'), $(this.form_field).attr('id'));
        this.results_hide();
    }
    return true;
}

基本上，如果在 Chosen 选择打开时按下 Ctrl-A，它将调用用户定义的委托(delegate) onSelectAll，并将 Chosen 容器的 ID 和基础选择的 ID 作为参数。如果未按下 Ctrl 键，我希望这会变成默认值，这样搜索字符串条目就可以照常工作。

回到我的页面我有以下内容:

function onSelectAll(containerId, selectId) {
  var ids = [];
  $("#" + containerId).find('.active-result').each(function () { ids.push(parseInt($(this).attr('data-option-array-index'))); });
  $(ids).each(function () { $($('#' + selectId + ' option')[this]).attr('selected', 'selected'); });
  $('#' + selectId).trigger('chosen:updated');
}

这会获取 Chosen 容器中可见结果的数组索引，在底层选择控件中将它们标记为已选中，然后导致 Chosen 容器更新。

我知道改变标准键盘快捷键的含义并不完全符合道德规范，但在对最有可能实际使用这个东西的其他三位开发人员进行的非正式调查中，他们都建议这样做，所以我认为我在现在清楚了。也就是说，非常欢迎改进和清理我的 javascript 的建议 - 我一直在做后端和 SQL 的东西，我已经完全失去了我的 UI 印章。