Agregar un botón de lista desplegable a Twitter arranque componente de escritura anticipada

Question

Twitter bootstrap viene con un componente de autocompletar muy útil llamado typeahead. Intento agregar un pequeño botón desplegable (o artilugio) de manera que cuando se presiona el componente typeahead actúe como un selector desplegable normal que muestre todas las opciones de origen de datos disponibles vinculadas (además de su capacidad de autocompletar nativo). El margen de beneficio actual es algo como lo siguiente:

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

Así que, en efecto, lo que se necesita es que el componente se comporte como un híbrido de una lista desplegable de autocompletar y widgets. ¿Alguien ha hecho esto antes? gracias ...

Answer 1

He encontrado este excelente componnet:

Source code
Live example

Pero una cosa, los antecedentes del botón desplegable ve rara en rollover. La solución consiste en un pequeño cambio en el "arranque-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

combustible UX, así provides un cuadro combinado basado en Bootstrap.