twitter bootstrap autocomplete dropdown / combobox with Knockoutjs


114

Tôi có một yêu cầu mà tôi PHẢI sử dụng trình đơn thả xuống tự động hoàn thành bootstrap, NHƯNG người dùng có thể có văn bản biểu mẫu miễn phí trong trình đơn thả xuống đó nếu họ muốn. Trước khi bạn nghĩ về TypeAhead, tôi có thể sử dụng hộp văn bản Bootstrap TypeAhead, nhưng tôi cần có biểu tượng thả xuống mà chúng tôi muốn cung cấp một số giá trị mặc định làm tùy chọn headstart trong trường hợp người dùng không biết tìm kiếm gì.

Tôi đang sử dụng điều này với MVC DropDownListFor vì điều đó tạo ra một điều khiển lựa chọn cho chúng tôi.

Tôi đã tìm thấy bài báo này làm điều đó cho tôi.

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

Tất cả những gì tôi phải làm là xóa tên khỏi điều khiển chọn và điều khiển cho phép tôi nhập văn bản biểu mẫu tự do. Tất cả tốt cho đến nay.

Bây giờ, tôi đang sử dụng điều này kết hợp với Knockoutjs. Tôi liên kết các tùy chọn và giá trị đã chọn của mình với điều khiển chọn và sau đó trên hàng được hiển thị của mẫu của tôi, tôi đã gọi (bộ chọn) .combobox () để điều khiển lựa chọn trở thành một comobobox khởi động và thêm điều khiển đầu vào và ẩn điều khiển chọn trong các cảnh phía sau.

Vấn đề bây giờ là khi tôi cố gắng lấy các giá trị của anh ấy để đăng lên máy chủ, vì giá trị tôi đặt trong hộp nhập không phải là một tùy chọn hợp lệ từ các tùy chọn tôi đã đưa để chọn điều khiển, nên nó luôn đặt nó thành tùy chọn đầu tiên theo mặc định. Đây là lý do, tôi đã đặt ràng buộc của giá trị đã chọn trên điều khiển chọn chứ không phải trên hộp nhập được tạo bởi bootstrap-combobox.js.

Câu hỏi của tôi là làm thế nào để tôi có được hộp đầu vào để liên kết dữ liệu với cùng một phần như điều khiển chọn được ràng buộc.

Bất kỳ lựa chọn nào khác ?? Hãy cho tôi biết nếu bạn cần giải thích rõ hơn hoặc có thắc mắc. Hãy đề nghị.

Cảm ơn.


Tôi đã tìm ra giải pháp cho tình huống của mình. Tôi đã sử dụng hộp văn bản TypeAhead thay vì comobox Tự động điền và hiển thị tùy chọn thả xuống theo mặc định khi người dùng tập trung vào điều khiển hoặc nhấn nút xuống. Bằng cách đó, họ biết họ có thể tìm kiếm những gì là yêu cầu chính của tôi.
Krishna Teja Veeramachaneni

Câu trả lời:


254

Hãy xem Select2 cho Bootstrap . Nó sẽ có thể làm mọi thứ bạn cần.

Một lựa chọn tốt khác là Selectize.js . Nó có cảm giác giống với Bootstrap hơn một chút.


27
Bạn đã sử dụng Select2 như thế nào để cho phép nhập văn bản chưa có trong nguồn dữ liệu?
compcentral

4
Như @compcentral đã đề cập chính xác, Select2 KHÔNG CHO PHÉP bạn nhập bất kỳ thứ gì không có trong danh sách tùy chọn. Sử dụng tính năng gắn thẻ (tự động) để mô phỏng điều này là phức tạp, vì nó không chấp nhận văn bản có khoảng trắng bên trong.
Stas Slabko

2
Thật là một phát hiện tốt! Tôi đã kết thúc bằng cách sử dụng Selectize vì nó có vẻ giống Bootstrap-esque hơn.
Steven

1
Do vấn đề được chỉ ra bởi @compcentral và Stas, tôi đã chọn sử dụng selectize.js.
Neil Monroe

1
@compcentral tại sao bạn không sử dụng phương pháp nguồn dữ liệu từ xa?
Clain Dsilva

23

Cơ sở dữ liệu HTML5 cơ bản có hoạt động không? Nó sạch sẽ và bạn không phải chơi với mã bên thứ ba lộn xộn. Hướng dẫn W3SCHOOL

Các tài liệu MDN là rất hùng hồn và các tính năng ví dụ.


3
Vấn đề chính với HTML 5 datalistlà nó không hỗ trợ bất kỳ sự kiện DOM nào. Vì vậy, mỗi khi bạn chọn một giá trị, bạn phải tab ra khỏi textbox tương ứng
Pawan

@Pawan Điều đó không còn đúng nữa (nữa?). Đầu vào được liên kết với danh sách dữ liệu kích hoạt sự thay đổi và đầu vào các sự kiện, ít nhất. Nhìn ở đây , cả sự kiện thay đổi và đầu vào đều kích hoạt nhật ký bảng điều khiển.
Félix Gagnon-Grenier,

1
Tât cả nhưng năm thang đo. Tất cả những năm rối tung xung quanh với các thư viện của bên thứ ba thay vì một giải pháp đơn giản và sạch sẽ đã được hỗ trợ ...
Félix Gagnon-Grenier



1

Tôi có thể đề xuất http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html , hoạt động giống như đề xuất bài đăng trên twitter nơi nó cung cấp cho bạn một danh sách người dùng hoặc chủ đề dựa trên thẻ @ hoặc #,

xem demo tại đây: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

trong cái này, bạn có thể dễ dàng thay đổi @ và # thành bất kỳ thứ gì bạn muốn


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.