9

アプリケーションに検索ボックスがあり、ユーザーはデータベースに保存されている患者の詳細を検索できます。患者の名前を入力すると、サーバーは 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"
 }
]

先行入力ライブラリがこの応答をレンダリングしようとすると、ドロップダウン リストに常に undefined と表示されます。この応答のすべてのフィールドを自動提案ドロップダウン リストに表示したいと考えています。誰かが私を導くことができれば幸いです。

ドロップダウンリストに次のようなレコードを表示したい:

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

前もって感謝します！

4

1 に答える 1

8

現在のコードは単純すぎてそれを達成できません。それを使用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/                                                               
}]);

基本的なアイデアを提供するだけで、お役に立てば幸いです。

于 2013-08-17T10:20:43.040 に答える