Typeahead показывает только 1 строку, даже если строк больше

Я пытаюсь внедрить Typeahead в приложение своего сайта, но пока обнаружил некоторые проблемы. Во-первых, это записи, которые я отправил со стороны сервера в ввод, даже если я получаю более одной строки, отображается только одна строка.

Моя среда:

  • узел.JS;
  • Экспресс с Jade Template Engine;
  • Начальная загрузка
  • МонгоДБ.

На стороне сервера я добавляю каждую строку, которую монго извлекает в выходной массив:

        docs.forEach(function(e) {
            output.push({
                _id:e._id,
                name:e.name,
                date:e.dates[0].date.toString('dd/MM/yyyy'),
                type: 'Show',
                desc:S(e.description).stripTags().s
            })
        });

Отправил его как JSON для ввода текста:

$('#header-search').typeahead({
    remote: '/layoutSearch?value=%QUERY',
    template:
        '<table style="width: 400px;"><tr><td><strong>{{name}}</strong></td><td style="float: right">{{date}} - <em>{{type}}</em></td></tr></table>' +
        '<p style="line-height: 100%; font-size: 11px">{{desc}}</p>'
    ,
    engine: Hogan,
    onselect: function(obj) {
        console.log('Selected: ' + obj);
    }
});

Мой код поиска по заголовку (Jade):

input#header-search.typeahead(type='text', placeholder='Search...', data-provide='typeahead', data-items='4')

Нашел где-то "data-items" и добавил, но ничего не изменилось, а также "data-provide", даже поле имени указано в опциях typeahead. Мой запрос в порядке, возвращает точно существующие документы.

Любое предложение будет очень приветствоваться.


person Ito    schedule 03.07.2013    source источник
comment
Вы проверили ответ XHR, чтобы убедиться, что он имеет 4 строки?   -  person Scotty.NET    schedule 04.07.2013
comment
Да, мой JSON содержит более одной строки.   -  person Ito    schedule 06.07.2013


Ответы (2)


Я думаю, вам нужно это:

valueKey – The key used to access the value of the datum in the datum object. Defaults to value.

Итак, попробуйте следующее:

$('#header-search').typeahead({
    remote: '/layoutSearch?value=%QUERY',
    valueKey: 'name',
    template:
        '<table style="width: 400px;"><tr><td><strong>{{name}}</strong></td><td style="float: right">{{date}} - <em>{{type}}</em></td></tr></table>' +
        '<p style="line-height: 100%; font-size: 11px">{{desc}}</p>'
    ,
    engine: Hogan,
    onselect: function(obj) {
        console.log('Selected: ' + obj);
    }
});

Надеюсь, поможет!

person Hieu Nguyen    schedule 03.08.2013

Если вы используете Bloodhound в качестве движка, я думаю, что добавление valueKey не решит проблему, но это решение, похоже, работает:

Typeahead.js/Bloodhound отображает только один результат

Это сработало для меня.

person Abdo Belk    schedule 14.02.2016