在jQuery UI Autocomplete中限制结果

我正在使用jQuery UI Autocomplete。

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

max参数不起作用，我仍然得到10个以上的结果。我想念什么吗？

这里是适当的文件为jQueryUI的部件。没有用于限制最大结果的内置参数，但是您可以轻松实现：

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

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

您可以为source参数提供一个函数，然后调用slice过滤后的数组。

这是一个工作示例： http : //jsfiddle.net/andrewwhitaker/vqwBP/

您可以将minlength选项设置为较大的值，也可以像这样通过CSS进行操作，

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

就像“ Jayantha”一样，说使用CSS是最简单的方法，但这可能会更好，

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

注意唯一的区别是“最大高度”。这将允许小部件将尺寸调整为较小的高度，但不超过200像素

添加到安德鲁的回答，你甚至可以引入一个maxResults属性，并使用它是这样的：

$("#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/

这应该有助于代码的可读性和可维护性！

这是我用的

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

自动溢出，因此在不应有的情况下不会显示滚动条。

我可以通过在CSS文件中添加以下内容来解决此问题：

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

如果结果来自mysql查询，则直接限制mysql结果更有效：

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

其中10是您想要的最大行数

我以以下方式做到了：

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允许您更改默认设置：

$('#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
   }
});

插件： 带有滚动条的jquery-ui-autocomplete-scroll和限制结果很漂亮

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

我已经尝试了上述所有解决方案，但是我的工作方式仅是这样：

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

没有最大参数。

http://docs.jquery.com/UI/自动完成

就我而言，这很好：

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