Question

标题几乎说明了一切。

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

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

我不会挑剔如何做到这一点，无论是使用“全选”选项，额外按钮还是按键。这适用于仅后端开发页面，因此用户界面不必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;
}

基本上，如果在选择选项打开时按下Ctrl-A，它将使用选定容器的id和基础选择的id作为参数调用用户定义的委托onSelectAll。如果没有按下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排序。

如何在jQuery Chosen多选AFTER搜索过滤中选择所有选项？

1 个答案: