2012-02-07 28 views
30

ComboBox AutoComplete của jQuery UI không có thanh cuộn ở bên phải và rất, không may, miễn là được hiển thị bên dưới. Tôi muốn hạn chế danh sách này với độ dài hợp lý - bất kỳ suy nghĩ nào về việc làm thế nào để đạt được điều đó? Cảm ơn!ComboBox Tự động hoàn thành jQueryUI Quá dài

jQuery UI AutoComplete ComboBox

+0

có thể trùng lặp của [Giới hạn kết quả trong Tự động điền jQuery] (http://stackoverflow.com/questions/4071887/limit-the-result-in-jquery-autocomplete) –

Trả lời

65

Bạn có thể thiết lập chiều cao thông qua CSS:

.ui-autocomplete { 
    max-height: 600px; 
    overflow-y: auto; /* prevent horizontal scrollbar */ 
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ 
    z-index:1000 !important; 
} 
+2

Điều này làm việc khá tốt, cảm ơn bạn! – Richard

+1

Lớp CSS hiện được đặt tên là ui-autocomplete-list. – jonnieZG

1

Bắt đầu tìm kiếm CSS. Nhiều khả năng danh sách thả xuống là một lựa chọn hoặc ul. Nếu thả xuống được đính kèm trong một DIV, thêm "overflow: auto", điều đó sẽ cho nó một thanh cuộn. Hoặc đặt chiều cao tối đa cho div. Một giải pháp khác sẽ đặt giới hạn cho kết quả. Chỉ cần không điền vào hộp với nhiều mục.

3

Đây là một câu hỏi cũ, vì vậy trong khi các giải pháp bởi j08691 làm việc tốt với Primefaces cũ, nay là tên lớp đã được đổi thành "ui-autocomplete-list ":

.ui-autocomplete-list { 
    max-height: 400px; 
    overflow-y: auto; /* prevent horizontal scrollbar */ 
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ 
    z-index:1000 !important; 
} 
1

Tại một số thời điểm này đã thay đổi một lần nữa, như jQuery-UI 1.12.1 lớp là 'ui-autocomplete.ui-front' để câu trả lời được chấp nhận trở thành:

.ui-autocomplete.ui-front { 
    max-height: 600px; 
    overflow-y: auto; /* prevent horizontal scrollbar */ 
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ 
    z-index:1000 !important; 
} 
Các vấn đề liên quan