Ограничить результаты в автозаполнении пользовательского интерфейса jQuery

Я использую автозаполнение jQuery UI.

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

параметр max не работает, и я все еще получаю более 10 результатов. Я что-то упустил?

13 112
jquery-ui-sortable autocomplete jquery-ui-autocomplete

13 ответов:

здесь соответствующей документации на jQueryUI виджет. Там нет встроенного параметра для ограничения максимальных результатов, но вы можете сделать это легко:

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

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

вы можете поставить функцию

245

Вы можете установить minlength опция для некоторого большого значения или вы можете сделать это с помощью css, как это, 

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

Так же, как "Jayantha" сказал, что использование css будет самым простым подходом, но это может быть лучше,

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

обратите внимание, что единственная разница-это "max-height". это позволит виджету изменить размер на меньшую высоту, но не более 200px

19

добавлять к Эндрю, можно даже вводим 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/

Это должно помочь читабельности и ремонтопригодности кода!

16

вот что я использовал

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

переполнение авто, так что полоса прокрутки не будет отображаться, когда это не предполагается.

9

Если результаты поступают из запроса mysql, более эффективно ограничить непосредственно результат mysql:

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

где 10-максимальное число строк

2

плагин: jquery-ui-автозаполнение-прокрутка с помощью скроллера и ограничения результаты прекрасны

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

Я мог бы решить эту проблему, добавив следующее содержимое в мой файл CSS:

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

Я сделал это следующим образом :

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

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

максимальный параметр отсутствует.

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

0

Я пробовал все решения выше, но мой работал только на этом пути:

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

в моем случае это прекрасно работает:

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