如何使用最新的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 

提前致谢!

您当前的代码太简单了,您需要使用templateremote来实现:

 $('#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/ }]);

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