Ограничить результаты в автозаполнении jQuery UI
Я использую автозаполнение jQuery UI.
$("#task").autocomplete({
max:10,
minLength:3,
source: myarray
});
параметр max не работает, и я все еще получаю более 10 результатов. Я что-то упускаю?
13 ответов
здесь соответствующей документации на jQueryUI виджет. Нет встроенного параметра для ограничения максимальных результатов, но вы можете сделать это легко:
$("#auto").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(myarray, request.term);
response(results.slice(0, 10));
}
});
вы можете предоставить функцию
Вы можете установить 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;}
обратите внимание, что единственная разница - "max-height". это позволит виджету изменять размер на меньшую высоту, но не более 200px
добавлять к Эндрю, вы даже можете вводим a 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;}
автоматическое переполнение, поэтому полоса прокрутки не будет отображаться, когда это не предполагается.
Если результаты поступают из запроса mysql, более эффективно ограничить непосредственно результат mysql:
select [...] from [...] order by [...] limit 0,10
где 10-максимальное число строк
плагин: jquery-ui-автозаполнение-прокрутка с помощью scroller и limit результаты прекрасны
$('#task').autocomplete({
maxShowItems: 5,
source: myarray
});
Я мог бы решить эту проблему, добавив следующий контент в мой файл CSS:
.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
}
}
));
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
}
});
Я пробовал все решения выше, но мой работал только на этом пути:
success: function (data) {
response($.map(data.slice (0,10), function(item) {
return {
value: item.nome
};
}));
},
в моем случае это прекрасно работает:
source:function(request, response){
var numSumResult = 0;
response(
$.map(tblData, function(rowData) {
if (numSumResult < 10) {
numSumResult ++;
return {
label: rowData.label,
value: rowData.value,
}
}
})
);
},