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

我的应用程序中有一个搜索框，用户可以在其中搜索存储在数据库中的患者详细信息。 他们会输入患者的姓名，服务器将回复JSON响应并提供所有详细信息。 为了方便这样的function，我使用的是最新版本的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库尝试呈现此响应时，我总是在下拉列表中看到未定义。 我想在自动建议下拉列表中显示此响应的所有字段。 如果有人可以指导我这样做，我将不胜感激。

我想在下拉列表中显示这样的记录：

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

提前致谢！

Answer 1

您当前的代码太简单了，您需要使用template和remote来实现：

 $('#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: [ '
{{forename}} {{surname}} ({{gender}} {{age}})
', '
{{dateOfBirth}}
' ].join(''), engine: Hogan // download and include http://twitter.github.io/hogan.js/ }]); 

只是为了给你一个基本的想法，希望它有所帮助。