Typeahead всегда показывает максимум 5 предложений

У меня есть приведенный ниже код, использующий Typeahead.js для предложений. У меня нет серьезных проблем с кодом, так как он работает нормально.

Незначительная проблема, с которой я сталкиваюсь, заключается в том, что в любой момент времени я вижу только 5 предложений, хотя с удаленного URL-адреса поступает более 5 предложений.

var isearch = new Bloodhound({
    datumTokenizer: function(d) { 
         return Bloodhound.tokenizers.whitespace(d.value); 
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: "http://localhost/search/get-data/%QUERY"
});

isearch.initialize();  

$("#search_box .typeahead").typeahead(null,{ name: "isearch",
    displayKey: "value",
    source: isearch.ttAdapter(),
    templates: {
         suggestion: Handlebars.compile("{{value}}")
    }
});

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


javascript jquery limit typeahead.js twitter-typeahead
person Purus    schedule 01.06.2014    source источник

Ответы (6)


arrow_upward
60
arrow_downward

В Typeahead версии 0.11.1:

Укажите «limit» во время создания экземпляра объекта typeahead, чтобы установить количество отображаемых предложений, например.

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
 limit: 10, // This controls the number of suggestions displayed
 displayKey: 'value',
 source: movies
});

См. рабочий пример здесь:

http://jsfiddle.net/Fresh/ps4w42t4/

В Typeahead версии 0.10.4.

Механизм предложений Bloodhound имеет значение по умолчанию пять для параметра «ограничение» (т.е. Максимальное количество предложений для возврата из Bloodhound#get)

Вы можете увеличить лимит, указав нужное значение при создании объекта Bloodhound. Например, чтобы указать ограничение в 10:

var isearch = new Bloodhound({
 datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.value); 
 },
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 remote: "http://localhost/search/get-data/%QUERY",
 limit: 10
});

Пример экземпляра Typeahead, где установлено ограничение на 10, можно найти здесь:

http://jsfiddle.net/Fresh/w03a28h9/

person Ben Smith    schedule 01.06.2014
comment
Спасибо за ссылку. Я уже видел это. Я хотел иметь полосу прокрутки, когда есть больше элементов. Общий лимит = 10 и отображение = 5 элементов. для остальных элементов мы должны использовать полосу прокрутки. - person Purus; 02.06.2014
comment
То, что вы ожидаете, не реализовано с помощью typeahead. Мой ответ позволит вам увеличить счет, и это единственный способ добиться этого на данный момент. - person Ben Smith; 02.06.2014
comment
Я играл с CSS и, наконец, получил его. Спасибо. - person Purus; 02.06.2014
comment
Хорошо, рад, что вы нашли решение. Вы должны ответить на свой вопрос, чтобы помочь другим, у которых такая же проблема. - person Ben Smith; 02.06.2014
comment
Конечно. Я просто больше экспериментирую. Я опубликую решение, как только я получу его хорошо. - person Purus; 02.06.2014
comment
Я написал свой ответ :) - person Purus; 02.06.2014
comment
есть ли способ показать предложения без ограничений? - person CJ Ramki; 19.02.2015
comment
@CJRamki Вы можете получить размер удаленного набора данных, а затем использовать это значение при создании экземпляра Bloodhound. Однако зачем вам это делать, поскольку возврат всех данных замедлит работу страницы, поскольку вам нужно будет получить все данные? - person Ben Smith; 19.02.2015
comment
да, нужно показать все предложения как требования пользователя-клиента. Так только. Спасибо за ответ. :) - person CJ Ramki; 20.02.2015
comment
Версия 0.11.1 — limit недоступна для BloodHound. sufficient – это вариант , но он предназначен для активации remote для заполнения предложений. Если вы используете Bloodhound + TT, используйте limit в опции «набор данных» TT для управления предложениями. - person dekdev; 08.09.2015

arrow_upward
38
arrow_downward

В моем случае опция «лимит» работала, но по-другому. Мне пришлось установить лимит на typeahead вместо Bloodhound. Выкладываю свой случай, может кому поможет.

bloodhoundSuggestionEngine = new Bloodhound({
datumTokenizer : function(d) {
return Bloodhound.tokenizers.whitespace(d.key);
},
queryTokenizer : Bloodhound.tokenizers.whitespace,
local : myOptions
});

$("#myinputbox").typeahead({
minLength : 3,
highlight : true
}, {
displayKey : 'key',
source : bloodhoundSuggestionEngine.ttAdapter(),
limit: 10
});
person Atul Kumbhar    schedule 23.07.2015
comment
IIRC, начиная с 0.11 ищейки, ограничение было снято как опция. Я думаю, это только вариант для typehead - person viggity; 13.01.2016
comment
кажется, что они постоянно меняют его туда-сюда - person Andrew Liu; 15.01.2016

arrow_upward
6
arrow_downward

В Typeahead версии 0.11.1:

Укажите «limit» во время создания экземпляра объекта typeahead, чтобы установить количество отображаемых предложений, но убедитесь, что оно на один меньше, чем максимальное число, возвращаемое вашим источником.

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    limit: 9, // one less than your return value. This controls the number of suggestions displayed
    displayKey: 'value',
    source: movies
});

см. https://github.com/twitter/typeahead.js/issues/1201

person BusyBee    schedule 29.09.2018
comment
Первый ноль сделал это за меня. Спасибо! - person COBIZ webdevelopment; 15.04.2020

arrow_upward
5
arrow_downward

Помимо добавления ограничения на создание экземпляров Bloodhound, как было предложено @Fresh, я сделал приведенный ниже стиль в CSS, чтобы получить желаемый результат.

.tt-suggestions {
  min-height: 300px;
  max-height: 400px;  
  overflow-y: auto;
}

Что я сделал, так это принудительно установил контейнер на 400 пикселей, чтобы я получал полосу прокрутки, когда есть больше результатов. Мне нужен был такой подход, потому что я не хотел, чтобы экран занимал больше места. Это будет работать, даже если есть 100 результатов... и не будет блокировать экран.

person Purus    schedule 02.06.2014

arrow_upward
3
arrow_downward

Другой способ может заключаться в том, чтобы напрямую изменить значения по умолчанию в классе Typeahead.

$.fn.typeahead.defaults = { ... items: 8, ...}

to

items: 'all'

person argoden    schedule 17.05.2016

arrow_upward
0
arrow_downward

Ответ @ Atul определенно помог мне, но у меня была еще одна проблема, связанная с ищейкой. Я использовал пульт, и я не получил бы результатов, которые, как я знаю, будут служить пультом. Это было потому, что он нашел что-то достаточно близкое в тайнике ищейки и не запрашивал данные у пульта. Таким образом, если изменить параметр sufficient на Bloodhound со значения по умолчанию на 100, он всегда запрашивает у пульта дополнительные данные.

person viggity    schedule 13.01.2016