久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

如何在 jquery selected 插件中選擇沒有選擇的文本

前端問題解決 html5模板網
How to choose the text without selection in jquery chosen plugin(如何在 jquery selected 插件中選擇沒有選擇的文本)
本文介紹了如何在 jquery selected 插件中選擇沒有選擇的文本的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

下面是我的代碼我的問題是我只想像劍道一樣實現我的意思是當用戶鍵入文本時不選擇文本，如果我們不選擇文本，應該從下拉列表中選擇它，就像 

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

<link rel="stylesheet" ><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" ><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" >
<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" >
<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).

這篇關于如何在 jquery selected 插件中選擇沒有選擇的文本的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

相關文檔推薦

jQuery/JavaScript Library for avatar creation?(用于創建頭像的 jQuery/JavaScript 庫?)
How to do following mask input problem?(如何做以下掩碼輸入問題?)
Issues Setting Value/Label Using DropKick Javascript(使用 DropKick Javascript 設置值/標簽的問題)
how to unit-test private methods in jquery plugins?(如何對 jquery 插件中的私有方法進行單元測試?)
stellar.js - configuring offsets / aligning elements for a vertical scrolling website?(stellar.js - 為垂直滾動網站配置偏移量/對齊元素?)
jQuery masked input plugin. select all content when textbox receives focus(jQuery 屏蔽輸入插件.當文本框獲得焦點時選擇所有內容)
主站蜘蛛池模板： 日韩精品一区二区三区在线播放 | 日本不卡一区 | 精品视频免费 | 日韩精品一区二区三区第95 | 大陆一级毛片免费视频观看 | 在线免费观看黄a | 国产精品久久久久久久模特 | 精品福利在线视频 | 天天色影视综合 | 在线播放亚洲 | 日韩免费| 国产伦精品一区二区三毛 | 久久蜜桃资源一区二区老牛 | 黄 色 毛片免费 | 在线观看亚洲精品视频 | 情侣av| a毛片| 国产成人精品一区二区三区网站观看 | 粉嫩粉嫩芽的虎白女18在线视频 | 超碰人人在线 | 一区二区精品视频 | 国产成人精品a视频一区www | 久久国产一区二区 | 国产高清视频在线观看 | 亚洲a视频 | 一区中文字幕 | 国产精品综合一区二区 | 国产成人精品福利 | 99在线国产| 久久精品一区二区视频 | 中文字幕av网 | 久久久久久久久久久91 | 亚洲欧美中文字幕 | 国产精品一区二区福利视频 | 免费激情 | 四虎成人免费电影 | 欧美综合久久 | 亚洲午夜电影 | 午夜手机在线 | 成人国产精品 | 大香在线伊779 |