向 Twitter bootstrap typeahead 组件添加下拉按钮答案

【问题标题】：Adding a dropdown button to Twitter bootstrap typeahead component向 Twitter bootstrap typeahead 组件添加下拉按钮
【发布时间】：2013-06-01 02:23:18
【问题描述】：

Twitter bootstrap 带有一个非常方便的类似于自动完成的组件，称为 typeahead。我正在尝试添加一个小的下拉按钮（或小部件），这样当按下 typeahead 组件时，它就像一个普通的下拉选择器，显示所有可用的数据源绑定选项（除了它的本机自动完成功能）。当前标记类似于以下内容：

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

因此，实际上需要让组件充当下拉和自动完成小部件的混合体。以前有人做过吗？谢谢...

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

我发现了这个优秀的组件：

Source code
Live example

但有一件事，下拉按钮的背景在翻转时看起来很有趣。修复涉及对“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;
}
...

【讨论】：

我试过用这个，但是一旦转换成组合框，就不能再绑定到jquery change事件了。

【解决方案2】：

Fuel UX 以及 provides 基于 Bootstrap 的组合框。

【讨论】：