2012-05-21 2 views
14

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

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

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

ответ

15

я нашел отличный 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; 
} 
... 
+0

Я попытался использовать это, но после преобразования в combobox вы больше не можете привязываться к событию смены jquery. –

5

топливо УБ, а provides выпадающие основанный на Bootstrap.

Смежные вопросы