Chosen: 在多选时保持打开状态

创建于 2013-09-12 · 53评论 · 资料来源: harvesthq/chosen

在我选择了一个项目后，有没有办法让已选择的菜单保持打开状态？我希望只能通过单击小部件区域外部来关闭它。

Feature Request

资料来源

silkfire

👍2

最有用的评论

theigl 于 2013-09-18

👍6

所有53条评论

如果您在选择选项时按住CMD ⌘或CTRL ，则选择将保持打开状态。目前没有选项可以默认保留选择选项。

koenpunt 于 2013-09-12

这可以以某种方式实现吗？

silkfire 于 2013-09-12

你能举个例子，在什么情况下这会有用？

koenpunt 于 2013-09-12

在我的应用程序中，我有一个搜索表单，用户可以在其中从选择的多选小部件中选择多个年龄组。令人讨厌的是菜单关闭了一秒钟然后再次重新打开（因为焦点触发了打开事件）。

silkfire 于 2013-09-12

theigl 于 2013-09-18

👍6

+1 - 我们使用 Chosen 作为过滤机制的唯一原因，最终用户很可能会按每个类别的多个项目进行过滤。当前的实现意味着我们必须包含一个辅助文本行来解释如何保持盒子打开，而不是仅仅能够设置一个选项并让它在需要时保持打开状态。

geebru 于 2013-10-21

绝对+1！！有很多用例，选择应该保持打开状态以便能够选择多个选项。事实上，我认为受益于选择保持打开状态的用例数量超过了仅选择一个选项后选择应该关闭的用例数量。从这个角度来看，保持打开状态甚至应该是默认行为。它没有被命名为“select-multiple”；-) 但是能够保持它打开的配置选项就足够了，我希望很快就会实现。

Ronner 于 2013-10-22

👍3 👎1

你好，

有没有人想办法解决这个问题？

当我尝试以下操作时它也不起作用，它不会触发打开事件：

jQuery("select.select-chosen").on('change', function(evt, params) {
    jQuery(this).trigger('chosen:open');
});

亚历山大先生

Mr-Alexander 于 2014-01-29

每个@geebru和@silkfire +1

ericscheid 于 2014-02-03

这可能是人们在多种模式下使用所选控件的第一痛点——尤其是当必须选择超过 2-3 个项目时。希望看到这个补充。谢谢。

thorhallur 于 2014-03-05

+1 这样的功能。同时，我使用以下“hack”使其适用于具有多个属性的选择：

var chosen = $("#MySelect").chosen().data("chosen");
var autoClose = false;

//...

var chosen_resultSelect_fn = chosen.result_select;
chosen.result_select = function(evt) {
    var resultHighlight = null;

    if(autoClose == false)
    {
        evt["metaKey"] = true;
        evt["ctrlKey"] = true;

        resultHighlight = chosen.result_highlight;
    }

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose == false && resultHighlight != null)
        resultHighlight.addClass("result-selected");

    return result;
};

alxkum 于 2014-03-28

danbohea 于 2014-05-14

panoply 于 2014-05-21

timjonesus 于 2014-07-25

davidtedmanjones 于 2014-07-28

这么多:+1:

mshwery 于 2014-08-08

上面的 hack 不起作用。似乎result_select是undefined 。
$("#inputField").chosen().result_select;
在v1.1.0和v1.0.0中。

JarnoLeConte 于 2014-09-20

对不起，正确的代码是：
$("#inputField").chosen().data("chosen").result_select

alxkum 于 2014-09-20

谢谢！这很好用。我终于得到了这段代码：

$chosen = $("#myChosenField").chosen();

var chosen = $chosen.data("chosen");
var _fn = chosen.result_select;
chosen.result_select = function(evt) {    
      evt["metaKey"] = true;
      evt["ctrlKey"] = true;
      chosen.result_highlight.addClass("result-selected");
      return _fn.call(chosen, evt);
};

JarnoLeConte 于 2014-09-20

👍3

我有一个动态页面，它根据用户输入生成多个选择框。来自 Jarnoleconte 的上述代码效果很好，除非有一个空选择，这会在控制台中产生错误消息：

未捕获的类型错误：无法读取未定义的 myfile.php 的属性“result_select”

目前，我已将其包含在 if 语句中：

$chosen = $("#myChosenField").chosen();

if ($("#myChosenField").length) {
  var chosen = $chosen.data("chosen");
  var _fn = chosen.result_select;
  chosen.result_select = function(evt) {    
  evt["metaKey"] = true;
  evt["ctrlKey"] = true;
  chosen.result_highlight.addClass("result-selected");
  return _fn.call(chosen, evt);
  };
}

因此，虽然这暂时是一个很好的解决方法，但我也是一个“+1”，因为它可以作为一个选项，类似于selected:stay_open的内容，并且一个“关闭”按钮被添加到下拉列表中。

LukeMcLachlan 于 2014-09-28

如果没有选择框，代码显然是行不通的。我发布的代码经过简化以便更容易理解。每个人都应该随意将它集成到他们的库中，例如制作包装器或其他东西。

alxkum 于 2014-09-28

对于那些可能感兴趣的人，我还想保留过滤/搜索文本输入，所以我在 ellekz 代码中添加了一些行。似乎在选择的 1.2 上运行良好。因为我根本不知道选择的代码，如果有什么问题，请随时告诉我。

var chosen = $(chosenSelectClass).chosen().data('chosen');
var autoClose = false;
var chosen_resultSelect_fn = chosen.result_select;
chosen.search_contains = true;

chosen.result_select = function(evt) 
{
    var resultHighlight = null;

    if(autoClose === false)
    {
        evt['metaKey'] = true;
        evt['ctrlKey'] = true;

        resultHighlight = chosen.result_highlight;
    }

    var stext = chosen.get_search_text();

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose === false && resultHighlight !== null)
        resultHighlight.addClass('result-selected');

    this.search_field.val(stext);               
    this.winnow_results();
    this.search_field_scale();

    return result;
 };

ronanquillevere 于 2014-11-18

这真的很好。谢谢@ronanquillevere :white_check_mark:

gsuero 于 2015-02-03

frahugo 于 2015-02-26

感谢黑客，它确实有效。我只删除了 this.winnow_results(); 调用以避免突出显示最近的活动选项。现在看起来更……平静:-)

能够直接从列表中取消选择选项会更好。现在它们只是灰色的，只能用 X 按钮删除。

thekrotek 于 2015-03-30

👍1

maslianok 于 2015-04-23

mariarabinovich 于 2015-04-28

+1，这对于多选下拉菜单是非常必要的。

MicahBrown 于 2015-05-11

当单个页面上有多个多选元素时，有什么方法可以修复@ronanquillevere发布的功能？

adocehic 于 2015-06-06

lucanos 于 2015-06-11

MuyBien 于 2015-06-23

+1，进行多重选择的主要原因是能够选择多个选项。 Chosen 应该支持快速执行此操作，而无需为每个选项重新打开选择菜单。这对于用户可能必须滚动以找到所需选项的长列表特别有帮助。

n0v1 于 2015-08-13

它自 2013 年以来一直开放，所以我决定改用 Select2。

zyphlar 于 2015-08-18

harrisrobin 于 2015-11-05

对于那些使用 angular-chosen 的人，只需将@ronanquillevere的代码放在 angular-chosen 指令的initOrUpdate函数中（您必须获取源代码而不是使用 bower/npm）。

这是我所做的：

             (function () {
                var autoClose              = false;
                var chosen_resultSelect_fn = chosen.result_select;
                chosen.search_contains     = true;
                chosen.result_select       = function (evt) {
                  var resultHighlight = null;

                  if (autoClose === false) {
                    evt['metaKey'] = true;
                    evt['ctrlKey'] = true;
                    resultHighlight = chosen.result_highlight;
                  }
                  var stext = chosen.get_search_text();
                  var result = chosen_resultSelect_fn.call(chosen, evt);

                  if (autoClose === false && resultHighlight !== null)
                    resultHighlight.addClass('result-selected');

                  this.search_field.val(stext);
                  this.winnow_results();
                  this.search_field_scale();
                  return result;
                };
              })();

harrisrobin 于 2015-11-11

👍2

zlatevbg 于 2015-12-03

+1 - 多选概率很高的多选会期望该框不会关闭是合乎逻辑的。 CMD/ctrl+click 是一个不错的功能，但这不是好的用户体验。

lightheaded 于 2016-01-27

+1 - 我们最近用 Chosen 替换了旧的多选，我们从用户那里得到的主要抱怨之一是，由于下拉菜单每次都会关闭，因此需要更多的点击才能选择列表中的多个项目。像其他人一样，我们将添加一个 hack，因此默认情况下它保持打开状态以进行多选。如果这是其中一种选择，那就太好了。

nshackles 于 2016-07-18

ashliewebb 于 2016-08-09

KJoergensen 于 2016-09-02

+1 这是一个重要功能。有人愿意帮忙做PR吗？

VinceG 于 2016-09-12

engineerbaraazakariya 于 2016-09-27

大家好，估计什么时候会有一个包含它的适当版本？还是我错过了什么？

markkap 于 2016-11-28

看起来这个急需的功能已经掌握了 3 个月了。

新版本怎么样？ :) :)

lvpro 于 2016-12-14

嗨，我试图在页面刷新后/呈现页面后保留用户选择的多个选择。
我选择了5个复合区（项目）和主要关键字进行搜索。通常我想在相同的多个选择中使用不同的关键字进行搜索。如果用户需要重复多项选择，这对用户来说不是很友好。我正在使用选择的 Jq 库。任何帮助将不胜感激。 ---达塔

DATTAU 于 2017-01-17

@DATTAU这与您使用常规表单选择的方式相同。

koenpunt 于 2017-01-18

koenpunt，你能解释一下吗？请！

DATTAU 于 2017-01-19

如果您需要一直保持打开状态，解决方法。
在 onload 中，将其称为 firstopen
$("#" + selectId).trigger("chosen:open");

在 selected.jquery.js 中有功能：
Chosen.prototype.results_hide = function() { if (this.results_showing) { this.result_clear_highlight(); this.container.removeClass("chosen-with-drop"); this.form_field_jq.trigger("chosen:hiding_dropdown", { chosen: this }); } return this.results_showing = false; };

将其替换为：
Chosen.prototype.results_hide = function() { return false; };

orik007 于 2017-03-01

我是这样做的，找这个方法
Chosen.prototype.result_select
添加另一个条件

Chosen.prototype.result_select = function(evt) {
  ...
  if (!(this.is_multiple && (!this.hide_results_on_select || (evt.metaKey || evt.ctrlKey)))) {
    //stay open temporary solution
    if (this.max_selected_options <= 0 || (this.max_selected_options > 0 && this.max_selected_options <= this.choices_count())) {
      this.results_hide();
      this.show_search_field_default();
    }
  }
  ...
};