Giới hạn kết quả trong Tự động hoàn thành giao diện người dùng jQuery

Tôi đang sử dụng jQuery UI Autocomplete.

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

Tham số tối đa không hoạt động và tôi vẫn nhận được hơn 10 kết quả. Tui bỏ lỡ điều gì vậy?

Đây là tài liệu thích hợp cho widget jQueryUI . Không có tham số tích hợp để giới hạn kết quả tối đa, nhưng bạn có thể thực hiện dễ dàng:

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

Bạn có thể cung cấp một hàm cho sourcetham số và sau đó gọi slicevào mảng đã lọc.

Đây là một ví dụ hoạt động: http://jsfiddle.net/andrewwhitaker/vqwBP/

Bạn có thể đặt minlengthtùy chọn thành một số giá trị lớn hoặc bạn có thể làm điều đó bằng cách css như thế này,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

Giống như "Jayantha" cho biết sử dụng css sẽ là cách tiếp cận dễ dàng nhất, nhưng điều này có thể tốt hơn,

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

Lưu ý sự khác biệt duy nhất là "chiều cao tối đa". điều này sẽ cho phép các widget thay đổi kích thước thành chiều cao nhỏ hơn nhưng không quá 200px

Thêm vào câu trả lời của Andrew , bạn thậm chí có thể giới thiệu một maxResultstài sản và sử dụng nó theo cách này:

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle: http://jsfiddle.net/vqwBP/877/

Điều này sẽ giúp mã dễ đọc và bảo trì!

đây là những gì tôi đã sử dụng

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

Tự động tràn để thanh cuộn sẽ không hiển thị khi không được phép.

Tôi có thể giải quyết vấn đề này bằng cách thêm nội dung sau vào tệp CSS của mình:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

Nếu kết quả đến từ truy vấn mysql, sẽ hiệu quả hơn khi giới hạn trực tiếp kết quả mysql:

select [...] from [...] order by [...] limit 0,10

Trong đó 10 là số lượng hàng tối đa bạn muốn

Tôi đã làm nó theo cách sau:

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

jQuery cho phép bạn thay đổi các cài đặt mặc định khi bạn đính kèm tự động hoàn thành vào đầu vào:

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});

Plugin: jquery-ui-autocomplete-scroll với cuộn và giới hạn kết quả rất đẹp

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});

Tôi đã thử tất cả các giải pháp trên, nhưng tôi chỉ làm việc theo cách này:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

Không có tham số tối đa.

http://docs.jquery.com/UI/Autocomplete

Trong trường hợp của tôi, điều này hoạt động tốt:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},