Question

我正在使用jQuery UI Autocomplete。

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

max参数不起作用，我仍然得到超过10个结果。我错过了什么吗？

Answer 1

以下是 jQueryUI 小部件的proper documentation。没有用于限制最大结果的内置参数，但您可以轻松完成：

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

Answer 2

你可以将minlength选项设置为某个大值，或者你可以通过这样的css来实现，

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

Answer 3

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

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

注意唯一的区别是“max-height”。这将允许窗口小部件调整为更小的高度但不超过200px

Answer 4

添加到Andrew's answer，您甚至可以介绍 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/

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

Answer 5

这是我用过的东西

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

溢出自动，因此当它不应该时，滚动条将不会显示。

Answer 6

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

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

Answer 7

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

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

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

Answer 8

我是按照以下方式做到的：

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
}
}
));

Answer 9

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
   }
});

Answer 10

插件： jquery-ui-autocomplete-scroll 使用滚动条和限制结果很漂亮

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

Answer 11

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

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

Answer 12

没有最大参数。

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

Answer 13

在我的情况下，这很好用：

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

限制jQuery UI自动完成的结果

13 个答案: