Twitter Bootstrap TypeĐầu tiên hoạt động như Danh sách thả xuống/Chọn thẻ có tính năng tự động hoàn thành

Question

Tôi muốn có danh sách thả xuống/< Chọn> Hành vi thẻ HTML với tính năng Tự động hoàn tất bằng cách sử dụng Twitter Bootstrap TypeAhead. Các liên kết here đạt được các tính năng của Combo Box, nơi người dùng có thể cung cấp đầu vào của riêng mình cũng có. Tôi muốn hạn chế Người dùng chỉ chọn từ tùy chọn được cung cấp. Có cách nào để tweek Twitter Bootstrap TypeAhead Plugin để mô phỏng hành vi của DropDown List/Tag với tính năng tự động hoàn thành.

Tôi đã gọi những câu dưới đây trước khi đăng

1. Adding a dropdown button to Twitter bootstrap typeahead component

Answer 1

Đó là thực sự tốt - thậm chí rất đơn giản - mà không thay đổi javascript typeahead/sử dụng mã thay đổi, NẾU bạn sẵn sàng không hiển thị kết quả phù hợp được đánh dấu.

HTML:

<input name="test" id="test"/> 
<button id="emu-select" class="btn btn-small" type="button"> 
<i class="icon-arrow-down"></i> 
</button> 

kịch bản:

$(document).ready(function() { 

    $("#test").typeahead({ 
     "source": ['Pennsylvania','Connecticut','New York','Maryland','Virginia'], 
     //match any item 
     matcher : function (item) { 
      return true; 
     }, 
     //avoid highlightning of "a" 
     highlighter: function (item) { 
      return "<div>"+item+"</div>" 
     } 
    }); 

    // "select"-button 
    $("#emu-select").click(function(){ 
     //add something to ensure the menu will be shown 
     $("#test").val('a'); 
     $("#test").typeahead('lookup'); 
     $("#test").val(''); 
    }); 
}); 

đang làm việc/example tại jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/

Answer 2

cải thiện Tiny để davidkonrads trả lời để giữ chức năng lọc khi gõ.

$(document).ready(function() { 

$("#test").typeahead({ 
    "source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'], 
    //match any item 
    matcher: function(item) { 
     if (this.query == '*') { 
      return true; 
     } else { 
      return item.indexOf(this.query) >= 0; 
     } 
    }, 
    //avoid highlightning of "*" 
    highlighter: function(item) { 
     return "<div>" + item + "</div>" 
    } 
}); 

// "select"-button 
$(".showAll").click(function(event) { 
    var $input = $("#test"); 
    //add something to ensure the menu will be shown 
    $input.val('*'); 
    $input.typeahead('lookup'); 
    $input.val(''); 
}); 

}); 

http://jsfiddle.net/d4kris/5rtGA/3/

Answer 3

Tôi chỉ tìm thấy plugin này tuyệt vời có thể biến một yếu tố CHỌN tiêu chuẩn vào rất liền mạch combo box độc đáo theo kiểu sử dụng typeahead bootstrap. Nó trông rất tuyệt, tôi sẽ sử dụng nó trong dự án tiếp theo của tôi.

https://github.com/danielfarrell/bootstrap-combobox

Live Example (Bootstrap 3)