106

Tôi có một yêu cầu nơi tôi phải sử dụng trình đơn thả xuống tự động hoàn thành tự khởi động, người dùng NHƯ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 phải có trình đơn thả xuống vì 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ì.twitter bootstrap autocomplete thả xuống/combobox với Knockoutjs

Tôi đang sử dụng tính năng này với MVC DropDownListFor khi tạo điều khiển chọn cho chúng tôi.

Tôi tìm thấy bài viết này làm điều đó cho tôi.

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

Tất cả tôi phải làm là cởi bỏ tên khỏi sự khống chế lựa chọn và kiểm soát được cho tôi nhập văn bản dưới hình thức miễn phí. Tất cả tốt cho đến nay.

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

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

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

Bất kỳ tùy chọn nào khác ?? Hãy cho tôi biết nếu bạn cần làm rõ thêm hoặc có thắc mắc. Vui lòng đề xuất.

Cảm ơn.

+0

tôi tìm ra giải pháp cho tình huống của tôi. Tôi đã sử dụng hộp văn bản TypeAhead thay vì hộp công cụ tự động hoàn thành 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 nút điều khiển hoặc nhấn xuống. Bằng cách đó, họ biết những gì họ có thể tìm kiếm đó là yêu cầu chính của tôi. –

Trả lời

244

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

Một tùy chọn tốt khác là Selectize.js. Nó cảm thấy bản địa hơn một chút so với Bootstrap.

+1

Tuyệt vời! Cảm ơn thông tin của bạn ! Đó là thành phần tôi cần. – Shinichi

+27

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

+4

Khi @compcentral được đề 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à cồng kềnh, vì nó không chấp nhận văn bản có khoảng trắng bên trong. –

19

Trình dữ liệu HTML5 cơ bản có hoạt động không? Sạch sẽ và bạn không phải chơi đùa với mã bên thứ ba lộn xộn ... W3SCHOOL tutorial

+3

Vấn đề chính với HTML 5 'datalist' là 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 hộp văn bản tương ứng – Pawan

+3

Ngoài ra nó không được hỗ trợ trong Safari? điều đó có nghĩa là tất cả các thiết bị i- [pad, phone, Mac] đều đi hạt cũng như –

2

Fuel UX combobox có tất cả các tính năng bạn mong đợi.

+1

Nó không có typeahead như xa như tôi có thể nhìn thấy. – jpkeisala

+1

Không tự động hoàn thành – writeToBhuwan

1

thể tôi đề nghị 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 danh sách người dùng hoặc chủ đề dựa trên @ hay # thẻ,

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

trong vụ việc này bạn có thể dễ dàng thay đổi @ và # để bất cứ điều gì bạn muốn

Các vấn đề liên quan