Bootstrap Typeahead 渲染问题答案

【问题标题】：Bootstrap Typeahead render issueBootstrap Typeahead 渲染问题
【发布时间】：2013-12-06 05:23:41
【问题描述】：

我正在使用带有预输入的 bootstrap 3，但在正确格式化时遇到了问题。

我的 Jquery：

$('input.query').typeahead({
    name: 'query',
    value: 'ntid',
    remote : 'jsonUser.php?query=%QUERY',
    minLength: 3,
    template: '<p><strong>{{ntid}}</strong> – {{name}}</p>',
    engine: Hogan,
    limit: 10  
});

当我输入 3 个字符时，这是 JSON 响应。

[
{
    "name": "John Doe",
    "qid": "Q1234",
    "empID": "123",
    "ntid": "test"
},
{
    "name": "Bob Jones",
    "qid": "Q5678",
    "empID": "456",
    "ntid": "testing"
},
{
    "name": "Mike James",
    "qid": "Q2233",
    "empID": "789",
    "ntid": "tester"
},
{
    "name": "Harry Potter",
    "qid": "Q2212",
    "empID": "223",
    "ntid": "testit"
}
]

但是，这是下拉列表中的结果。

如您所见，即使响应中有 4 个结果，它也只显示 1 个结果。

附带说明，当我单击该唯一响应时，下拉列表会消失，不会输入到文本字段中。

我错过了什么吗？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap typeahead.js

【解决方案1】：

我想通了，我不得不补充：

    valueKey: 'ntid' as an option.

完成：

    $('input.query').typeahead({
    name: 'query',
    value: 'ntid',
    remote : 'jsonUser.php?query=%QUERY',
    minLength: 3,
    template: '<p><strong>{{ntid}}</strong> – {{name}}</p>',
    engine: Hogan,
    limit: 10  ,
    valueKey: 'ntid'
});

valueKey 设置是我正在搜索的 json 标记。

【讨论】：