Question

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

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

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: [                                                                 
        '<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.js库呈现JSON响应

1 个答案: