限制jQuery UI自动完成的结果

Question

我正在使用jQuery UI Autocomplete.

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

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

Answer 1

这里是适当的文件为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/

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

添加安德鲁的答案,你甚至可以引入一个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;
}