将下拉按钮添加到Twitter Bootstrap typeahead组件

Question

Twitter Bootstrap提供了一个非常方便的自动完成组件，称为typeahead。我正在尝试添加一个小的下拉按钮（或小部件）以便在按下时，typeahead组件将像正常的下拉选择器一样显示所有可用的数据源绑定选项（除了其本身的自动完成功能）。当前标记大致如下：

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

因此实际上需要的是让组件表现出下拉列表和自动完成小部件的混合体。有人以前做过这个吗？谢谢...

- Rabih Kodeih

Answer 1

我发现了这个很棒的组件：

源代码
实时示例

然而有一件事，当鼠标悬停在下拉按钮上时，背景看起来很奇怪。修复需要在“bootstrap-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;
}
...

- Rabih Kodeih

---

我尝试使用这个，但一旦转换为组合框，就无法再绑定到jQuery更改事件。 - Andrew Westberg - BCSH

Answer 2

Fuel UX同样提供了一个基于Bootstrap的Combobox。

- Adrian Heine