通過按鍵選擇引導程序下拉值

我使用引導程序btn組下拉菜單作爲下拉列表的組合框。工作正常。通過按鍵選擇引導程序下拉值

<div class="btn-group insertText insertTextSMSTemplate"> 
    <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Select a Value</button> 
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style='padding:2px;'><span class="icon-chevron-down"></span> 
    </button> 
    <ul class="dropdown-menu" style="height: 100px; overflow: auto"> 
     <li><a href="#"></a> 
     </li> 
     <!-- <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> --> 
    </ul> 
</div>

我寫了一個jquery函數來選擇所選的li值並生成按鈕文本。

但問題是，我的列表很長，我有下拉滾動。所以如果我想從下拉列表中選擇說第70個李元素，我必須向下滾動並選擇。

我想添加一個功能，如果第70個值是「Temp」，那麼如果我按下「T」，則從列表中的T開始的單詞只顯示在下拉列表中。

來源

2014-01-31 Saurabh Sinha

我覺得像下面的東西應該工作。不知道，但沒有嘗試過運行。

$("#ID").keydown(function(e){ // the keydown even on ul 
    var chr =String.fromCharCode(e.which); 
    $(this).find("li").each(function(){ // if the key down is not in UL then make sure the "this" should refer to UL 
     var name = $(this).text(); 
     if(name.toLowerCase().indexOf(chr.toLowerCase()) === 0) { 
      $(this).focus(); // this should focus you 
      return false; 
     } 
    });

來源

2014-01-31 11:42:38

我也需要這個。下面是用jQuery自舉3點對焦/選擇我的工作液通過按鍵輸入：

$(".dropdown").bind('keydown', function(event) { 
    var keyChar = String.fromCharCode(event.keyCode); 
    var selectedItem = $(this).find('a').filter(function(){ return $(this).text().indexOf(keyChar) === 0; }).first(); 
    selectedItem.focus(); 
});

說明：我們的想法是讓所有的可聚焦元素的列表，在這種情況下的標籤，然後通過一些過濾它們方法來測試你的按鍵是否是第一個字符。

希望這會有幫助

來源

2015-07-30 17:17:58 genkilabs

這個簡單的解決方案適用於諸如首字母縮略詞，字母代碼等大寫字母。正如@Edwin_Vincent指出的那樣，如果您的標籤被縮減，您可以添加'''.ToLowerCase（）'''。上面的解決方案對於重複按鍵也很好。 – genkilabs

修改版本的jenkilabs代碼。如果你想環通，與按鍵開始的項目，然後用這個：

 

     $(".dropdown").bind('keydown', function (event) { 
      //this will open the list if it is not open and select a value 
      if (event.keyCode != 13){ 
        if ($(this).find('button').attr('aria-expanded') == 'false') 
        { 
         $(this).find('.dropdown-toggle').dropdown('toggle'); 
        } 
      } 
      var keyChar = String.fromCharCode(event.keyCode).toLowerCase(); 
      var selectedItems = $(this).find('a').filter(function() { 
       return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
      }); 
      var f = $(selectedItems).is(':focus'); 
      if (f) 
      { 
       selectedItems = $('a:focus').parent().nextAll().find('a').filter(function() { 
        return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
       }).first(); 
       if (selectedItems.length == 0) 
       { 
        selectedItems = $(this).find('a').filter(function() { 
         return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
        }); 
       } 
      } 
      selectedItems.first().focus(); 
     });

的.ToLowerCase將允許您選擇用小寫字符開頭的項目，你不必組以相同的字符開頭的項目。

一個
一個
b
一個

該代碼會發現第三個 '一' 在沒有。 4，如果你一直按a，那麼它會回到第一個'a'。

只要這（見下文）是下拉結構，這將工作。

<div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> 
<ul class="dropdown-menu"> 
<li><a>text here</a></li> 
</ul> 
</div>

確保<a>嵌套在<li></li>範圍內，並且是帶class =「下拉菜單」圍繞<button>和<ul>

來源

2017-07-06 18:21:38

不錯。這可能比我的用例要求更完整。 – genkilabs

@genkilabs謝謝！ –

如果您有興趣使用插件，你可以使用Select2一個div 。它非常易於使用，當你將select初始化爲select2元素時，它將包含一個搜索欄，當你鍵入它時，它將自動過濾這些選項。

這裏是the examples所以你可以看看你是否喜歡它。

來源

2017-07-11 16:12:39 Proto

通過按鍵選擇引導程序下拉值

回答

相關問題