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

问题描述

标题几乎说明了一切。

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

I have several select boxes on a page, all dynamically generated in an ASP.NET webform, some with hundreds of options. I'd like to be able to type in a search string and then select all entries that match.

很容易选择全部并在基础选择中使用javascript取消全部控制，然后调用 $（'＃control-id'）。触发器（'选择：更新'）; 但是我在尝试仅选择匹配的选项时遇到问题搜索过滤器。

It's easy to select all and deselect all using javascript on the base select control and then calling $('#control-id').trigger('chosen:update'); but I am having issues when trying to only select the options matching the search filter.

我不会挑剔如何做到这一点，无论是全选选项，额外按钮还是按键。这是针对仅后端开发的页面，因此UI不必100％直观。

I'm not picky as to how this is done, either with a "Select all" option, an extra button, or a keystroke. This is for a backend dev-only page, so the UI doesn't have to be 100% intuitive.

推荐答案

我结束了通过更改所选插件并将以下代码添加到 AbstractChosen.prototype.keyup_checker ：

I ended up solving this by altering the chosen plugin and adding the following code to 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，将使用Chosen容器的id和基础select的id作为参数调用用户定义的委托 onSelectAll 。如果没有按下Ctrl键，我希望它能达到默认值，这样可以让搜索字符串输入正常工作。

Basically, if Ctrl-A is pressed while the Chosen select is open, it will call a user-defined delegate onSelectAll with the Chosen container's id and the underlying select's id as arguments. If the Ctrl key is not pressed, I want this to fall through to the default, which allows search string entry to work as usual.

返回我的页面我有以下：

Back on my page I have the following:

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容器中可见结果的数组索引，标记它们在底层选择控件中选择，然后使选择的容器更新。

This gets the array indexes of the visible results in the Chosen container, marks them as selected in the underlying select control, and then causes the Chosen container to update.

我知道改变标准键盘快捷键的含义并不完全是犹太教，但是在一个非常可能实际使用这个东西的其他三个开发者的非正式民意调查中，他们都建议了，所以我想我现在已经清楚了。也就是说，改进和清理我的JavaScript的建议非常受欢迎 - 我已经做了后端和SQL的东西这么久我已经完全失去了我的UI排序。

I am aware it's not entirely kosher to change the meaning of a standard keyboard shortcut, but in an informal poll of the three other devs most likely to actually use this thing, they all suggested it, so I think I'm in the clear for now. That said, suggestions to improve and clean up my javascript are quite welcome - I've been doing backend and SQL stuff for so long I've totally lost my UI chops.

这篇关于如何在jQuery Chosen多选AFTER搜索过滤中选择所有选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！