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

126

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

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

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

Сантош
источник
11
В maxавтозаполнении нет опции, вызываемой
Джаянта Лал Сирисена

Ответы:

272

Вот соответствующая документация для виджета 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
Работает как шарм. Это очень полезно, если ваш список автозаполнения очень длинный (~ 10k результатов) и замедляет рендеринг HTML.
Бенджамин Крузье,
Большое вам спасибо за это! Теперь я могу позволить пользователям иметь огромный список в localStorage, но веб-сайт кажется действительно быстрым! Прекрасный! : D Большое вам спасибо за это! : D так счастлив, что я нашел это решение ^ __ ^
Алиссо
что, если на одной странице есть два поля автозаполнения? Когда я делаю срез ответа на обоих, они вообще перестают нарезать: /
Алиссо
+1 за это решение. Я добавлю minLength: 3, чтобы сузить результаты. jsfiddle.net/vqwBP/295
Адриан П.
2
В предоставленном решении jsFiddle измените значение среза с 10 на 3, а затем в поле ввода введите символ C. вы получите только 3 значения, которые для конечного пользователя могут заставить их поверить, что это единственные доступные значения. и не может продолжать ввод символов. Все, что я предлагаю, - это предоставить хороший справочный текст для сопровождения этого решения (например, будут отображаться только первые XX совпадающих результатов. Продолжайте вводить текст, чтобы уточнить результаты ». Что-то в этом
роде
45

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

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
Джаянта Лал Сирисена
источник
Genius. Мне нравится простота этого, и это позволяет пользователю решать.
denislexic 07
18
Это довольно взломано. Если у вас действительно длинный список, а автозаполнение возвращает тысячи совпадений, он будет чертовски медленным ...
Вайк Хермекз
1
Согласитесь с Вайком. Это плохое решение с точки зрения масштабируемости.
Kiksy
4
Согласитесь с Вайком. Не играйте с CSS, когда игра написана на JS.
Адриан П.
Я сделал то же самое в своем приложении-словаре. Это достойно!
Moxet
25

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

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

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

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

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

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

загвоздка
источник
10

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

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

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

Desto
источник
5

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

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
Сэм
источник
Пожалуйста, не добавляйте «спасибо» в качестве ответа. На самом деле они не дают ответа на вопрос и могут быть восприняты будущими посетителями как шум. Вместо этого голосуйте за понравившиеся ответы. Таким образом, будущие посетители вопроса будут видеть большее количество голосов за этот ответ, а ответчик также будет вознагражден очками репутации. См. Почему голосование так важно .
jps
это именно то, что я искал! не ограничивая количество результатов, а количество показанных элементов! thx
Serge insas
Почему у этого ответа так мало голосов? Что-то не так? У меня сработало, по крайней мере, на первый взгляд.
Szybki
3

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

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

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

the_nutria
источник
1
Нехорошо запрашивать БД каждую мышь! Может быть медленным на некоторых серверах или огромных БД. Кстати, я не голосовал против, а написал это объяснение. Что делать людям, когда они голосуют против. Спасибо.
Адриан П.
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
}
}
));
А. Х. Джамали
источник
2

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
   }
});
myjeeed
источник
2

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

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});
KingRider
источник
2

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

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,
                }
            }
        })
    );
},
tlberio
источник