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

Question

Twitter引导程序带有一个非常方便的自动完成组件,称为typeahead.我正在尝试添加一个小的下拉按钮(或小部件),这样当按下时,typeahead组件将像普通的下拉选择器一样显示所有可用的数据源绑定选项(除了其本机自动完成功能).当前的标记类似于以下内容:

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

因此,实际上所需要的是组件表现为下拉和自动完成小部件的混合.以前有人这样做过吗？谢谢...

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;
}
...

Answer 2

Fuel UX还提供基于Bootstrap的Combobox.