在 jQueryUI 自动完成中限制结果

我正在使用 jQueryUI 自动完成。

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

最大参数不工作，我仍然得到超过10个结果。我错过了什么吗？

126861 次浏览
小开

没有最大参数。

Http://docs.jquery.com/ui/autocomplete

小开

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

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
小开
最佳答案

下面是 JQueryUI小部件的 适当的文件。没有一个内置的参数来限制最大的结果，但是你可以很容易地完成它:

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


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

您可以为 source参数提供一个函数，然后在筛选后的数组上调用 slice。

下面是一个工作示例: < a href = “ http://jsfiddle.net/andrewwhitaker/vqwBP/”> http://jsfiddle.net/andrewwhitaker/vqwbp/

小开

就像“ Jayantha”说的使用 css 是最简单的方法但这个可能更好,

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

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

小开

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

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

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

小开

这是我用过的

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

溢出会自动显示，所以滚动条不会在不应该显示的时候显示。

小开

我是这样做的:

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

添加到 安德鲁的回答，您甚至可以 介绍一个 maxResults属性，并使用它的方式:

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

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

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

小开

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

插件: 自动完成滚动 与滚动器和限制的结果是美丽的

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

我已经尝试了以上所有的解决方案，但我的只有这种方法:

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

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

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

在我的例子中，这种方法很有效:

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

我把这个留给任何使用这个图书馆的人

JavaScript-autoComplete/1.0.4/auto-complete. js

这可能会有帮助，因为演示版本没有显示如何限制结果。

new autoComplete({
selector: 'input[name="name_of_searchbox"]',
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [];
var matches = []; //For Pushing Selected Terms to be always visible, can be adapter later on based on user searches
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches.slice(0,10));
}
});

希望这个对大家有用。 干杯！


提交答案