Javascript 如何使用最新的typeahead.js库呈现JSON响应

我的应用程序中有一个搜索框，用户可以在其中搜索存储在数据库中的患者详细信息。他们将输入患者的姓名，服务器将用JSON响应返回所有详细信息。为了促进这些功能，我使用了最新版本的typeahead.js

以下是我的javascript代码：

$("#search-box").typeahead({
    remote: 'searchPatient.do?q=%QUERY'
});

这段代码给出了以下JSON响应：

[
 {
  "id":1,
  "surname":"Daniel",
  "forename":"JOHN",
  "address":
            {
              "id":23,
              "houseNameOrNumber":"35",
              "addressDetail":"Roman House",
              "postCode":"NE1 2JS"
            },
  "gender":"M",
  "age":27,
  "dateOfBirth":"25/08/1985"
 }
]

当typeahead库试图呈现此响应时，我总是在下拉列表中看到undefined。我想在自动建议下拉列表中显示此响应的所有字段。如果有人能指导我这样做，我将不胜感激

我想在下拉列表中显示如下记录：

John Daniel (M, 27)
35 Roman House, NE1 2JS
25/08/1985

---

提前谢谢

您当前的代码太简单，无法实现这一点，您需要使用

模板

和

远程

来实现这一点：

$('#search-box').typeahead([{                              
    name: 'Search',
    valueKey: 'forename',
    remote: {
        url: 'searchPatient.do?q=%QUERY',
        filter: function (parsedResponse) {
            // parsedResponse is the array returned from your backend
            console.log(parsedResponse);

            // do whatever processing you need here
            return parsedResponse;
        }
    },                                             
    template: [                                                                 
        '<p class="name">{{forename}} {{surname}} ({{gender}} {{age}})</p>',
        '<p class="dob">{{dateOfBirth}}</p>'
    ].join(''),                                                                 
    engine: Hogan // download and include http://twitter.github.io/hogan.js/                                                               
}]);

$（“#搜索框”）.typeahead（[{
名称：'搜索'，
valueKey:'名字'，
远程：{
url:“searchPatient.do？q=%QUERY”，
过滤器：函数（parsedResponse）{
//parsedResponse是从后端返回的数组
console.log（parsedResponse）；
//在这里做你需要的任何处理
返回解析响应；
}
},                                             
模板：[
“
{{forename}}{{lasname}}（{{gender}}{{age}}）
”，
“
{{dateOfBirth}
”
].加入（“”），
引擎：Hogan//下载并包括http://twitter.github.io/hogan.js/                                                               
}]);

---

给你一个基本的想法，希望能有所帮助。

不过我意识到一件事。如果我的json响应有许多记录，那么typeahead仍然只显示顶部记录。我是否需要在这里更改其他内容？嗯，很难说，Do get真的获得了一个数组作为搜索的结果，console.log（parsedResponse）的结果是什么？我找到了答案：之所以只获得1个结果，是因为json中的数据对象中必须包含：标记和值字段。我有完全相同的问题，一旦你纠正了你的Json数据，它就会很好。它将很容易显示Json所给出的内容。。。谢谢此答案不再准确，请参见：