Làm cách nào để sử dụng hộp chọn với jQuery AutoComplete?

Question

Ngay bây giờ tôi có tiện ích Tự động điền của tôi trong hộp văn bản. Lý tưởng nhất, nó sẽ là một hộp chọn, nhưng tôi không thể tìm ra cách để cho ai đó gõ vào một hộp chọn.

Vì vậy, tôi bị xuống hạng để có hộp văn bản và hộp ẩn. Hộp ẩn sẽ được cập nhật với id của nội dung hiển thị trong hộp văn bản.

Tôi khá mới đối với jQuery, ít nhất là ở cấp chuyên sâu như thế này. Tôi có làm điều này khó hơn tôi cần không? Tôi chắc chắn cần tự động hoàn thành, vì có khả năng hàng trăm nghìn giá trị có thể.

Answer 1

Có a great example chính xác điều này trên trang demo jQueryUI để tự động hoàn thành. Nó thực sự sử dụng một phần tử select làm cửa hàng sao lưu.

Bạn có thể dễ dàng sửa đổi điều này để sử dụng nguồn dữ liệu từ xa. Nếu bạn cần nguồn từ xa, hãy cho tôi biết và tôi có thể cung cấp một ví dụ.

Answer 2

Bạn nên xem xét plugin jQuery có tên là chosen.
Tôi nghĩ đó là plugin jQuery tốt nhất được viết trong năm qua (hoặc nhiều hơn).

Lựa chọn là một plugin JavaScript làm cho các hộp chọn dài, khó sử dụng thân thiện với người dùng hơn nhiều. Nó hiện đang có sẵn trong cả hai jQuery và Prototype hương vị.

Answer 3

Có một giải pháp thay thế rất tốt cho "đã chọn" - "Select2" (jQuery only).

"Select2" trường hợp sử dụng

• Tăng cường Selects mẹ đẻ với tìm kiếm.
• Tăng cường các lựa chọn gốc với giao diện đa lựa chọn tốt hơn.
• Tải dữ liệu từ JavaScript: dễ dàng tải các mục qua ajax và yêu cầu chúng có thể tìm kiếm được.
• Nhóm chọn tham gia lồng nhau: lựa chọn gốc chỉ hỗ trợ một cấp lồng nhau. Select2 không có hạn chế này.
• Gắn thẻ: có thể thêm các mục mới khi đang di chuyển.
• Làm việc với bộ dữ liệu từ xa, lớn: khả năng tải một phần bộ dữ liệu dựa trên cụm từ tìm kiếm.
• Phân trang bộ dữ liệu lớn: hỗ trợ dễ dàng để tải thêm trang khi kết quả được cuộn đến cuối.
• Templating: hỗ trợ hiển thị kết quả tùy chỉnh và lựa chọn.