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

Posted 2023-05-07

【中文标题】如何使用最新的 typeahead.js 库呈现 JSON 响应

【英文标题】：How to render JSON response using latest typeahead.js library

【发布时间】：2013-08-19 16:10:28

【问题描述】：

我的应用程序中有一个搜索框，用户可以在其中搜索存储在数据库中的患者详细信息。他们将输入患者的姓名，服务器将使用 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

提前致谢！

【参考方案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/                                                               
]);

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

【讨论】：

我意识到了一件事。如果我的 json 响应有很多记录，那么 typeahead 仍然只显示最上面的记录。我需要在这里更改其他内容吗？

嗯很难说，确实得到一个数组作为搜索的结果，console.log(parsedResponse)的结果是什么？

我找到了答案：你只得到 1 个结果的原因是因为你在 json 中的数据对象必须有一个：令牌和值字段。我遇到了完全相同的问题，一旦您更正了 Json 数据就可以了。

显示 JSON 所提供的内容会很容易......谢谢！

这个答案不再准确，见：twitter.github.io/typeahead.js/examples/#custom-templates