如何在未选择jQuery的插件中选择未选择的文本 [英] How to choose the text without selection in jquery chosen plugin

问题描述

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

The below is my code my problem is i just want to implement like kendo i mean not with selection when user types the text and if we won't select the text it should be selected from drop down list as like in kendo In the below image you can see if you type medium and click mouse in sideways i mean without selecting with mouse it loads from drop down.

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

推荐答案

我发现这样做的唯一方法是隐藏下拉菜单-检查输入的值是否与第一个元素的值相同下拉菜单，如果是的话-触发该元素的mouseup(在下拉菜单内部):

The only way I found to do so is once the dropdown is hidden - check if the value of the input is the same as the value of the first element in the drop down, and if so - trigger the mouseup for that element (inside the dropdown):

检查实时样本:

$(".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(这会导致菜单关闭)，因为chosen的代码中还有另一个setTimeout，因此需要在显示后将其隐藏.

Added setTimeout to blur the input (which cause the menu to close), since there is another setTimeout inside the code of chosen so needed to hide it after it's shown.

说明:在chosen代码内，有一个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(以确保该菜单处于隐藏状态)，并且我确保在150毫秒后将其称为.

The function will run after the timeout is up. In my sample - the function is call the input_blur of the chosen menu (to make sure the menu is hidden), and I made sure it's called after 150 milliseconds).

这篇关于如何在未选择jQuery的插件中选择未选择的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！