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

2022-01-11 00:00:00 jquery jquery-plugins javascript ajax jquery-chosen

下面是我的代码我的问题是我只想像剑道一样实现我的意思是当用户键入文本时不选择文本，如果我们不选择文本，应该从下拉列表中选择它，就像

$(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>
<em>带组的多选</em><br><select data-placeholder="你最喜欢的足球队" style="width:350px;"class="chosen-select" 多个 tabindex="6"><option value=""></option><optgroup label="NFC 东"><option>达拉斯牛仔队</option><option>纽约巨人队</option><选项>费城老鹰队</选项><选项>华盛顿红皮队</选项></optgroup><optgroup 标签="NFC NORTH"><option>芝加哥熊队</option><option>底特律雄狮队</option><option>绿湾包装工队</option><option>明尼苏达维京人队</option></optgroup><optgroup label="NFC 南"><选项>亚特兰大猎鹰队</选项><选项>卡罗莱纳黑豹队</选项><option>新奥尔良圣徒队</option><option>坦帕湾海盗队</option></optgroup><optgroup label="NFC 西"><option>亚利桑那红雀队</option><选项>圣.路易斯·拉姆斯</option><option>旧金山 49 人队</option><option>西雅图海鹰队</option></optgroup><optgroup label="亚足联东区"><option>布法罗比尔</option><option>迈阿密海豚队</option><option>新英格兰爱国者队</option><option>纽约喷气机队</option></optgroup><optgroup label="AFC NORTH"><option>巴尔的摩乌鸦队</option><选项>辛辛那提孟加拉虎</选项><选项>克利夫兰布朗队</选项><选项>匹兹堡钢人队</选项></optgroup><optgroup label="亚足联南区"><option>休斯顿德州人队</option><选项>印第安纳波利斯小马队</选项><选项>杰克逊维尔美洲虎队</选项><option>田纳西泰坦队</option></optgroup><optgroup label="AFC 西区"><option>丹佛野马队</option><option>堪萨斯城酋长队</option><option>奥克兰突袭者队</option><option>圣地亚哥闪电队</option></optgroup></选择></div>

解决方案

我发现这样做的唯一方法是一旦下拉菜单被隐藏 - 检查输入的值是否与第一个元素的值相同下拉菜单，如果是这样 - 触发该元素的 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');变量 t = i;设置超时(函数(){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>
<em>带组的多选</em><br><select data-placeholder="你最喜欢的足球队" style="width:350px;"class="chosen-select" 多个 tabindex="6"><option value=""></option><optgroup label="NFC 东"><option>达拉斯牛仔队</option><option>纽约巨人队</option><选项>费城老鹰队</选项><选项>华盛顿红皮队</选项></optgroup><optgroup 标签="NFC NORTH"><option>芝加哥熊队</option><option>底特律雄狮队</option><option>绿湾包装工队</option><option>明尼苏达维京人队</option></optgroup><optgroup label="NFC 南"><选项>亚特兰大猎鹰队</选项><选项>卡罗莱纳黑豹队</选项><option>新奥尔良圣徒队</option><option>坦帕湾海盗队</option></optgroup><optgroup label="NFC 西"><option>亚利桑那红雀队</option><选项>圣.路易斯·拉姆斯</option><option>旧金山 49 人队</option><option>西雅图海鹰队</option></optgroup><optgroup label="亚足联东区"><option>布法罗比尔</option><option>迈阿密海豚队</option><option>新英格兰爱国者队</option><option>纽约喷气机队</option></optgroup><optgroup label="AFC NORTH"><option>巴尔的摩乌鸦队</option><选项>辛辛那提孟加拉虎</选项><选项>克利夫兰布朗队</选项><选项>匹兹堡钢人队</选项></optgroup><optgroup label="亚足联南区"><option>休斯顿德州人队</option><选项>印第安纳波利斯小马队</选项><选项>杰克逊维尔美洲虎队</选项><option>田纳西泰坦队</option></optgroup><optgroup label="AFC 西区"><option>丹佛野马队</option><option>堪萨斯城酋长队</option><option>奥克兰突袭者队</option><option>圣地亚哥闪电队</option></optgroup></选择></div>

更新

添加 setTimeout 到 blur 输入(导致菜单关闭)，因为在 setTimeout>选择所以需要在显示后隐藏它.

<块引用>

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

setTimeout 有 2 个参数

运行函数
等待时间(以毫秒为单位).

该函数将在超时后运行.在我的示例中 - 该函数是调用 chosen 菜单的 input_blur (以确保菜单被隐藏)，并且我确保它被调用 afterem> 150 毫秒).

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>

解决方案

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):

Check live sample:

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

Update

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.

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.

The setTimeout gets 2 arguments

Function to run
Time to wait (in milliseconds).

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).

相关文章