如何在 jquery selected 插件中选择没有选择的文本

Posted

技术标签:

【中文标题】如何在 jquery selected 插件中选择没有选择的文本【英文标题】：How to choose the text without selection in jquery chosen plugin 【发布时间】：2016-12-01 20:28:23 【问题描述】：

下面是我的代码我的问题是我只想像剑道一样实现我的意思是当用户键入文本时不选择文本，如果我们不选择文本，应该从下拉列表中选择它，就像在@987654321 中一样@ 在下图中，您可以看到如果您键入 medium 并在侧面单击鼠标，我的意思是没有用鼠标选择它从下拉列表中加载。 

$(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>

【问题讨论】：

但是在您的示例代码中，如果您在选择输入之外单击，则不会发生任何事情。这似乎是预期的行为吧？ 是的，视频末尾显示错误，但如果您看到演示 demos.telerik.com/kendo-ui/combobox/index，您就会明白我想要实现的目标 @Rayon 如果我们键入输入但首先需要不使用鼠标选择并且如果用户想要使用鼠标选择，则应该选择文本 @overflowstack9：我相信这就是“chosen-jquery”插件的设计方式，您将无法改变这种行为。 @kukkuz demos.telerik.com/kendo-ui/combobox/index 我可以使用这个插件，但主要问题是它调用所有库 //kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js那就是我要去choose-jquery，或者你能推荐任何其他像这样的插件，它像我所说的那样加载像choice-jquery一样快速并具有预期的行为 【参考方案1】：

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

检查实时样本：

$(".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，因此需要在显示后将其隐藏。

解释：在chosen 代码中有一个setTimeout 函数来显示菜单。我需要克服这种行为，所以我添加了一个新的setTimeout，但间隔更长。

setTimeout 有 2 个参数

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

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

【讨论】：

好，但问题是我想在选择后隐藏滚动条查看此图像oi66.tinypic.com/rkmnnk.jpg 我的意思是滚动条应该在选择后关闭........ 你能解释一下这个 t.chosen.input_blur(); , 150);我的意思是特别大约 150 ..... 在那里添加了更好的解释。让我知道现在是否更好。 我的最后一个请求，当我们要输入文本时出现许多值，是否可以将滚动条的大小调整为 4 或 5 个值......？ 让我们continue this discussion in chat.

以上是关于如何在 jquery selected 插件中选择没有选择的文本的主要内容，如果未能解决你的问题，请参考以下文章

在 PHP 中，如何使用 select2（Jquery 插件）显示选定的值

如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。？

select2 jquery插件重置具有预选项目的选择元素

使用 jquery select2 插件时，如果已列出 ajax 调用中的有效值，如何防止选择新标签？

如何使用 jQuery 验证插件验证 Select2 插件数组

删除 Select2 Jquery 插件中的默认选择