具有多個選擇和自動填充框的Bootstrap菜單過濾器

我使用最新的Bootstrap，並且我有多個選項與選擇框。但是，當您選擇1項目時，整個項目會關閉，但我希望您可以有多個選項，然後該框關閉。這有可能實現嗎？具有多個選擇和自動填充框的Bootstrap菜單過濾器

此外，我有一個不起作用的搜索/自動填寫表單。我的想法是，當你輸入「J」時，會自動顯示「Japan」。那可能嗎？

如果可能，我更喜歡Bootstrap內部解決方案。 jQuery只有在沒有辦法實現我的想法的時候。

BOOTPLY這裏... BOOTPLY

感謝。

<div class="btn-toolbar"> 
    <!--Default buttons with dropdown menu--> 
    <div class="btn-group"> 
     <button class="btn btn-default" type="button">Country</button> 
     <button class="btn btn-default dropdown-toggle"   data-toggle="dropdown" type="button"><span class="caret"></span></button> 
     <div class="dropdown-menu scrollable-menu" style="margin-left: 2em"> 
      <input class="form-control" placeholder="Search values" 

type="text"> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Austria</label> 
      </div> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Colombia 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label><input value="" type="checkbox"> Japan</label> 
      </div> 
     </div> 
    </div></div>

來源

2015-11-24 raulbaros

它不會自動關閉，我在FF，如果我選擇該複選框，而不是標籤。儘管這是一個尷尬的設計選擇。你能重新考慮用戶界面嗎？ – Tony

一個下拉菜單，就是要「選擇」，所以如果你不想收，你DIV /標籤（check this）上點擊時要preventDefault()行動。事實上，如果你只是點擊複選框，你可以選擇多個選擇。

至於搜索/自動填充，我建議你檢查Select2插件，因爲我不認爲Bootstrap有一個準備用於這樣的自定義html的東西。而且，因爲您已經包含jQuery文件，您爲什麼不想將其用於自定義搜索功能？

編輯：我發現這個其他SO回答可以幫助你https://stackoverflow.com/a/17907276/1151408

來源

2015-11-24 22:53:20 Yuri

具有多個選擇和自動填充框的Bootstrap菜單過濾器

回答

相關問題