jQuery Chosen 插件 - 激活（即焦点）不起作用？答案

【问题标题】：jQuery Chosen plugin - activate (i.e. focus) not working?jQuery Chosen 插件 - 激活（即焦点）不起作用？
【发布时间】：2015-01-13 13:54:44
【问题描述】：

我在 Bootstrap Modal 中实例化 Chosen 插件。启动模态后，我正在调用 Chosen 插件。

除了能够自动聚焦元素以允许在不先点击元素的情况下进行输入之外，所有功能都按预期工作。奇怪的是，我在元素周围出现了一个蓝色边框，这表明它具有焦点，但在我单击对象之前实际上没有按键注册。

我只需要它来为 Chrome 工作，我目前正在运行版本 39.0.2171.95。

我正在遵循文档中的说明：

http://harvesthq.github.io/chosen/options.html#triggerable-events

代码如下：

var $modal = $('#' + modalId); // This element contains relevant modal markup along with <select> element
$modal.modal();

var $mySelect = $('#mySelectElement'); // id of the <select> element
$mySelect.chosen();
$mySelect.trigger('chosen:activate');  // This doesn't work...

也尝试了以下方法，但无济于事：

$mySelect.trigger('chosen:open');      // This doesn't work...

任何指针表示赞赏。

干杯，李

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-chosen

【解决方案1】：

我找到了答案，或者至少找到了解决方法。

在单步执行代码时，我注意到 trigger('chosen:activate') 方法在 $modal.modal() 完成之前被调用，即模式尚未显示。

我只是在调用 chosen:activate 之前添加了一个异步延迟，这似乎可以修复它，并且可以立即输入 Chosen 元素：

// Enable chosen plugin...
var $mySelect= $('#mySelect');
$mySelect.chosen();
var enableChosen = setTimeout(function() {
    $mySelect.trigger('chosen:activate');
}, 250);

任何低于 250 毫秒的东西都会再次停止工作。我想这与必须等待模态淡入淡出动画完成有关。

** 更新 **

另一种更好的方法，挂钩到 Bootstrap 模式的 shown.bs.modal 回调，如下所示：

$modal.on('shown.bs.modal', function(e) {
// Enable chosen plugin...
    var $mySelect = $('#mySelect');
    $mySelect.chosen();
    $mySelect.trigger('chosen:activate');
});

【讨论】：

这是一个很好的解决方案，但研究模态是否在淡入淡出动画完成后有触发事件或回调。
感谢 Eduardo，已经按照您的建议进行操作。答案已更新。

【解决方案2】：

您的代码必须有效。这是一个基于官方文档的简单示例。我不知道你是否在你的代码中做更多的事情，而你的代码不起作用。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <header>
          <h1>Chosen <small>(<span id="latest-version">v1.3.0</span>)</small></h1>
        </header>

          <em>Into This</em>
          <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>         

          </select>
        </div>
      </div>

    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   var $mySelect = $('.chosen-select');
   $mySelect.chosen();
   $mySelect.trigger('chosen:open');
  </script>
</body>

</html>

【讨论】：

哦！先生非常感谢您。 trigger('chosen:open'); 是正确的语法。这是我的工作。