如何在 jquery chosen 插件中选择不带选择的文本

Question

下面是我的代码我的问题是我只想像 kendo 那样实现我的意思是当用户键入文本时不使用 selection 如果我们不 select文本应该从下拉列表中 selected，如 kendo 在下图中，您可以看到您是否键入 medium 并在侧面单击鼠标，我的意思是不使用鼠标 selecting它从下拉加载。

$(function(){
    $(".chosen-select").chosen();
});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
  
<div>
          <em>Multiple Select with Groups</em><br>
          <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
            <option value=""></option>
            <optgroup label="NFC EAST">
              <option>Dallas Cowboys</option>
              <option>New York Giants</option>
              <option>Philadelphia Eagles</option>
              <option>Washington Redskins</option>
            </optgroup>
            <optgroup label="NFC NORTH">
              <option>Chicago Bears</option>
              <option>Detroit Lions</option>
              <option>Green Bay Packers</option>
              <option>Minnesota Vikings</option>
            </optgroup>
            <optgroup label="NFC SOUTH">
              <option>Atlanta Falcons</option>
              <option>Carolina Panthers</option>
              <option>New Orleans Saints</option>
              <option>Tampa Bay Buccaneers</option>
            </optgroup>
            <optgroup label="NFC WEST">
              <option>Arizona Cardinals</option>
              <option>St. Louis Rams</option>
              <option>San Francisco 49ers</option>
              <option>Seattle Seahawks</option>
            </optgroup>
            <optgroup label="AFC EAST">
              <option>Buffalo Bills</option>
              <option>Miami Dolphins</option>
              <option>New England Patriots</option>
              <option>New York Jets</option>
            </optgroup>
            <optgroup label="AFC NORTH">
              <option>Baltimore Ravens</option>
              <option>Cincinnati Bengals</option>
              <option>Cleveland Browns</option>
              <option>Pittsburgh Steelers</option>
            </optgroup>
            <optgroup label="AFC SOUTH">
              <option>Houston Texans</option>
              <option>Indianapolis Colts</option>
              <option>Jacksonville Jaguars</option>
              <option>Tennessee Titans</option>
            </optgroup>
            <optgroup label="AFC WEST">
              <option>Denver Broncos</option>
              <option>Kansas City Chiefs</option>
              <option>Oakland Raiders</option>
              <option>San Diego Chargers</option>
            </optgroup>
          </select>
        </div>

Answer 1

我发现这样做的唯一方法是隐藏下拉列表后 - 检查输入的值是否与下拉列表中第一个元素的值相同，如果是 - 触发 mouseup 对于该元素（在下拉列表中）：

查看实时样本：

$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
  searched_value = i.chosen.get_search_text();
  firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
  if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
    firstElementOnDropdown.trigger('mouseup');
    var t = i;
    setTimeout(function() {
      t.chosen.input_blur();
    }, 150);
  }
});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
  <em>Multiple Select with Groups</em><br>
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value=""></option>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
      <option>Chicago Bears</option>
      <option>Detroit Lions</option>
      <option>Green Bay Packers</option>
      <option>Minnesota Vikings</option>
    </optgroup>
    <optgroup label="NFC SOUTH">
      <option>Atlanta Falcons</option>
      <option>Carolina Panthers</option>
      <option>New Orleans Saints</option>
      <option>Tampa Bay Buccaneers</option>
    </optgroup>
    <optgroup label="NFC WEST">
      <option>Arizona Cardinals</option>
      <option>St. Louis Rams</option>
      <option>San Francisco 49ers</option>
      <option>Seattle Seahawks</option>
    </optgroup>
    <optgroup label="AFC EAST">
      <option>Buffalo Bills</option>
      <option>Miami Dolphins</option>
      <option>New England Patriots</option>
      <option>New York Jets</option>
    </optgroup>
    <optgroup label="AFC NORTH">
      <option>Baltimore Ravens</option>
      <option>Cincinnati Bengals</option>
      <option>Cleveland Browns</option>
      <option>Pittsburgh Steelers</option>
    </optgroup>
    <optgroup label="AFC SOUTH">
      <option>Houston Texans</option>
      <option>Indianapolis Colts</option>
      <option>Jacksonville Jaguars</option>
      <option>Tennessee Titans</option>
    </optgroup>
    <optgroup label="AFC WEST">
      <option>Denver Broncos</option>
      <option>Kansas City Chiefs</option>
      <option>Oakland Raiders</option>
      <option>San Diego Chargers</option>
    </optgroup>
  </select>
</div>

更新

将 setTimeout 添加到 blur 输入（这会导致菜单关闭），因为 chosen 的代码中还有另一个 setTimeout，因此需要隐藏显示后。

Explanation: Inside the chosen code there is is a setTimeout function to show the menu. I needed to overcome this behavior so I added a new setTimeout, but with higher interval.

setTimeout 得到 2 个参数

函数到运行
等待时间（以毫秒为单位）。

该函数将运行在超时后。在我的示例中 - 该函数调用 chosen 菜单的 input_blur（以确保菜单被隐藏），并且我确保它被调用 after 150毫秒）。

如何在 jquery chosen 插件中选择不带选择的文本

How to choose the text without selection in jquery chosen plugin

javascript

ajax

jquery

jquery-plugins

jquery-chosen

更新