即使有更多行，Typeahead 也只显示 1 行答案

【问题标题】：Typeahead only shows 1 row even if there are more rows即使有更多行，Typeahead 也只显示 1 行
【发布时间】：2013-07-03 20:48:46
【问题描述】：

我正在尝试在我的站点应用程序中实现 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 发送到预先输入：

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

在某处找到“数据项”并添加了它，但没有任何改变，而且“数据提供”，甚至名称字段都在预输入选项中指定。我的查询没问题，完全返回现有文档。

欢迎提出任何建议。

【问题讨论】：

您检查过 XHR 响应以确保它有 4 行吗？
是的，我的 JSON 包含不止一行。

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

【解决方案1】：

我认为你需要这个：

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

希望对你有帮助！

【讨论】：

【解决方案2】：

如果您使用Bloodhound 作为引擎，我认为添加valueKey 不会解决问题，但这个解决方案似乎有效：

Typeahead.js / Bloodhound display just one result

这对我有用。

【讨论】：