How to render JSON response using latest typeahead.js library

Question

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.

Here is my javascript code:

$("#search-box").typeahead({
    remote: 'searchPatient.do?q=%QUERY'
});

This code gives me following JSON response:

[
 {
  "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.

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!

Solution

Your current code is too simple to achieve that, you need to use template and remote to achieve that:

$('#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.

Comments

[whitecollar]

I realized one thing though. If my json response has many records, typeahead still displays just the top record. Do I need to change something else here?

[Hieu Nguyen]

Hmm hard to say, do get really get an array as result of the search, what's the result of console.log(parsedResponse)?

[Piotr Stulinski]

I found the answer to this: the reason you are getting only 1 result is because your data objects in json must have a: tokens and value field in them. I had exactly the same issue, once you correct your Json data it will be fine.

[Zachary Dahan]

It'll be so easy to display just what the JSON is giving instead ... Thanks!

[Jon]

This answer is no longer accurate, see: twitter.github.io/typeahead.js/examples/#custom-templates