twitter-bootstrap 如何使用最新的 typeahead.js 库呈现 JSON 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18287102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render JSON response using latest typeahead.js library
提问by whitecollar
I have got a search box in my application where in users can search for a patient details stored in the database. they would type in the name of the patient and server will respond back with JSON response with all the details. In order to facilitate such functionality, I am using the latest version typeahead.js.
我的应用程序中有一个搜索框，用户可以在其中搜索存储在数据库中的患者详细信息。他们将输入患者的姓名，服务器将使用包含所有详细信息的 JSON 响应进行响应。为了促进此类功能，我使用了最新版本的 typeahead.js。
Here is my javascript code:
这是我的 javascript 代码：
$("#search-box").typeahead({
remote: 'searchPatient.do?q=%QUERY'
});
This code gives me following JSON response:
这段代码给了我以下 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"
}
]
When typeahead library tries to render this response, I always see undefined in the drop down list. I want to show all the fields of this response in the auto suggest drop down list. I would appreciate if someone could guide me in doing so.
当 typeahead 库尝试呈现此响应时，我总是在下拉列表中看到 undefined。我想在自动建议下拉列表中显示此响应的所有字段。如果有人能指导我这样做，我将不胜感激。
I want to display record like this in the drop down list:
我想在下拉列表中显示这样的记录：
John Daniel (M, 27)
35 Roman House, NE1 2JS
25/08/1985
Thanks in advance!
提前致谢！
采纳答案by Hieu Nguyen
Your current code is too simple to achieve that, you need to use templateand remoteto achieve that:
您当前的代码太简单了，无法实现，您需要使用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: [
'<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/
}]);
Just to give you the basic idea, hope it helps.
只是给你一个基本的想法，希望它有帮助。
