javascript - 如何在jquery选择插件中选择不选择的文本

Question

下面是我的代码，我的问题是我只想像剑道一样实现，我的意思是当用户键入文本时不进行选择，如果我们不选择文本，则应该从下拉列表中选择它，如 kendo 中所示如果您输入中号并在侧面单击鼠标，您可以看到下图，我的意思是，无需使用鼠标选择，它就会从下拉菜单中加载。

$(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 来模糊输入(这会导致菜单关闭)，因为代码中还有另一个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 毫秒)。