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

95

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

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

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

  • 11
    В автозаполнении нет опции max
Теги:
autocomplete
jquery-ui-autocomplete

13 ответов

227
Лучший ответ

Вот надлежащая документация для виджета 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/

Поделиться
  • 7
    Работает как шарм. Это очень полезно, если ваш список автозаполнения очень длинный (~ 10 тыс. Результатов) и замедляет рендеринг HTML.
  • 0
    Большое вам спасибо за это! Теперь я могу позволить пользователям иметь огромный список в localStorage, но сайт чувствует себя очень быстро! Прекрасный! : D спасибо большое за это! : D так счастлив, что я нашел это решение ^ __ ^
Показать ещё 6 комментариев
35

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

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
Поделиться
  • 0
    Genius. Мне нравится простота этого, и это позволяет пользователю решать.
  • 17
    Это довольно глупо. Если у вас действительно длинный список, а автозаполнение возвращает тысячи совпадений, это будет чертовски медленно ...
Показать ещё 4 комментария
19

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

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

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

Поделиться
  • 4
    Из-за вашего решения. Даже это действительно то, что мы обсуждаем решения jQuery. Предложение CSS-решения для программиста не очень хорошая идея, когда проблему можно решить с помощью jQuery. И в конце это просто маскирует результаты, а не решает проблему, как в принятом ответе. Ну вот!
  • 3
    @SamBattat Использование css для программирования - ужасный хак. Представьте, что вы пытаетесь отладить это!
12

Добавляя к Andrew answer, вы даже можете ввести свойство 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/

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

Поделиться
9

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

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

Переполнение автоматически, поэтому полоса прокрутки не показывается, когда она не должна.

Поделиться
2

Plugin: jquery-ui-autocomplete-scroll с скроллером и предельные результаты красивы

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});
Поделиться
2

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

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

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

Поделиться
  • 1
    Не хорошо запрашивать БД каждую мышь вверх! Может быть медленным на некоторых серверах или огромной БД. Кстати, я не голосовал, а написал это объяснение. Что люди должны делать, когда голосуют против. Благодарю.
1

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

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
Поделиться
  • 0
    Пожалуйста, не добавляйте «спасибо» как ответы. На самом деле они не дают ответа на вопрос и могут быть восприняты как будущие посетители как шум. Вместо этого upvote ответы, которые вам нравятся. Таким образом, будущие посетители вопроса увидят большее количество голосов по этому ответу, а ответчик также получит очки репутации. Посмотрите, почему голосование важно .
  • 0
    это именно то, что я искал! не ограничивая количество результатов, но количество предметов shwn! Спасибо
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

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

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
}
}
));
Поделиться
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

Я пробовал все вышеперечисленные решения, но мои только работали следующим образом:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},
Поделиться
0

Параметр max отсутствует.

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

Поделиться
  • 1
    Я вижу параметр max по этой ссылке, docs.jquery.com/UI/Autocomplete/autocomplete в меню параметров
  • 2
    Я не вижу никакого параметра "max" в вашей ссылке.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню