將下拉按鈕添加到Twitter引導程序typeahead組件

Twitter引導程序帶有一個非常方便的自動完成組件，稱爲typeahead組件。我正在嘗試添加一個小的下拉按鈕（或小部件），以便在按下時，typeahead組件將像正常的下拉選擇器一樣顯示所有可用的數據源綁定選項（除了其本機自動填充功能）。當前的標記是類似如下：將下拉按鈕添加到Twitter引導程序typeahead組件

<input type="text" 
     data-provide="typeahead" 
     data-items=5 
     data-source='["option 1","option 2","option 3"]'>

因此，實際上我們所需要的是組件表現爲一個下拉列表，並自動完成部件的混合體。以前有人做過這個嗎？謝謝...

來源

2012-05-21 Rabih Kodeih

我發現這個優秀componnet：雖然

Source code
Live example

一兩件事，下拉按鈕的背景看起來很滑稽的側翻。此修復程序涉及「自舉combobox.css」一個小的變化：

... 
.combobox-container .add-on { 
    float: left; 
    display: block; 
    width: auto; 
    min-width: 16px; 
    height: 18px; 
    margin-right: -1px; 
    padding: 4px 5px; 
    font-weight: normal; 
    line-height: 18px; 
    color: #999999; 
    text-align: center; 
    text-shadow: 0 1px 0 #ffffff; 
    /* background-color: #f5f5f5; */ // <<------------ comment this line 
    border: 1px solid #ccc; 
    -webkit-border-radius: 3px 0 0 3px; 
    -moz-border-radius: 3px 0 0 3px; 
    border-radius: 3px 0 0 3px; 
} 
...

來源

2012-06-09 18:21:07

我試過使用它，但是一旦轉換爲組合框，就無法再綁定到jquery更改事件。 –

燃料UX以及provides基於引導的組合框。

來源

2012-10-25 18:34:40

將下拉按鈕添加到Twitter引導程序typeahead組件

回答

相關問題