Thêm một nút thả xuống vào phần khởi động Twitter bootstrap

Question

Trình khởi động Twitter đi kèm với một thành phần tự động hoàn thiện rất tiện dụng được gọi là typeahead. Tôi đang cố gắng thêm một nút thả xuống nhỏ (hoặc widget) sao cho khi nhấn thành phần typeahead sẽ hoạt động giống như một bộ chọn thả xuống bình thường hiển thị tất cả các tùy chọn ràng buộc nguồn dữ liệu sẵn có (ngoài khả năng tự động hoàn thành của nó). Đánh dấu hiện tại là một cái gì đó như sau:

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

Vì vậy, trên thực tế những gì cần thiết là cho thành phần cư xử như một lai của một dropdown và autocomplete widget. Bất kỳ ai đã làm điều này trước đây? nhờ ...

Answer 1

Tôi đã tìm thấy componnet tuyệt vời này:

Source code
Live example

Một điều mặc dù, nền nút thả xuống trông hài hước trên rollover. Việc sửa chữa liên quan đến một sự thay đổi nhỏ trong "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

Nhiên liệu UX cũng provides một Combobox dựa trên Bootstrap.