Обмежте результати в автоматичному завершенні інтерфейсу jQuery

Я використовую jQuery UI Autocomplete.

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

Параметр max не працює, і я все одно отримую більше 10 результатів. Я щось пропускаю?

Ось відповідна документація для віджета 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/

Ви можете встановити 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;}

Зауважте, єдина відмінність - "максимальна висота". це дозволить віджету змінити розмір на меншу висоту, але не більше 200 пікселів

Додавання до відповіді Ендрю , ви можете навіть ввести в 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;}

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

Я можу вирішити цю проблему, додавши наступний вміст до мого CSS-файлу:

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

Якщо результати надходять із запиту mysql, то ефективніше обмежити результат mysql безпосередньо:

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

де 10 - максимальне число рядків, яке ви хочете

Я зробив це наступним чином:

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

Плагін: jquery-ui-autocomplete-прокрутка зі скроллером та обмеження результатів прекрасні

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

Я спробував усі рішення вище, але мій працював лише таким чином:

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

Максимального параметра немає.

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

У моєму випадку це працює чудово:

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