Ограничить результаты в JQuery UI Автозаполнение

Question

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

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

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

Answer 4

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

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

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 (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

Answer 9

Плагин: jquery-ui-autocomplete-scroll со скроллером и прекрасными результатами ограничения

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

Answer 10

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