Добавление выпадающей кнопки для Twitter-загрузки

Twitter bootstrap поставляется с очень удобным автозаполняемым компонентом, называемым typeahead. Я пытаюсь добавить небольшую кнопку раскрывающегося списка (или виджет), так что при нажатии компонент typeahead будет действовать как обычный селектор выпадающего списка, отображающий все доступные параметры привязки источника данных (в дополнение к его собственной способности автозаполнения). Текущая разметка выглядит примерно так:

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

Таким образом, в действительности необходимо, чтобы компонент работал как гибрид выпадающего списка и виджеты автозаполнения. Кто-нибудь это делал раньше? спасибо...

Ответы

Ответ 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;
}
...