即使行数较多,Typeahead也只显示1行

时间:2013-07-03 20:48:47

标签: node.js express bootstrap-typeahead typeahead.js

我正在尝试在我的网站应用中实施Typeahead,但到目前为止发现了一些问题。第一件事是关于我从服务器端发送到typeahead的记录,即使我得到多行,它只显示一行。

我的环境是:

  • Node.js的;
  • 使用Jade模板引擎快递;
  • 自举
  • MongoDB的。

在服务器端,我添加了mongo在输出数组上获取的每一行:

        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发送给typeahead:

$('#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')

找到了“数据项”的某个地方并添加了它,但没有改变,还有“数据提供”,甚至名称字段在typeahead选项中指定。我的查询没问题,完全返回现有文档。

非常欢迎任何建议。

2 个答案:

答案 0 :(得分:6)

我认为你需要这个:

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

希望它有所帮助!

答案 1 :(得分:0)

如果您使用Bloodhound作为引擎,我认为添加valueKey无法解决问题,但此解决方案似乎有效:

Typeahead.js / Bloodhound display just one result

这对我有用。