Jak renderować odpowiedź JSON przy użyciu najnowszej biblioteki typeahead.js

Question

Mam pole wyszukiwania w mojej aplikacji, w którym użytkownicy mogą wyszukiwać dane pacjenta przechowywane w bazie danych. będą wpisywać nazwę pacjenta, a serwer odpowie z odpowiedzią JSON ze wszystkimi szczegółami. Aby ułatwić taką funkcjonalność, używam najnowszej wersji typeahead.js.

Oto mój kod javascript:

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

Ten kod daje mi następujące odpowiedzi 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" 
} 
] 

Gdy wpisywanie znaków z wyprzedzeniem biblioteka stara się uczynić tę odpowiedź, zawsze widzę niezdefiniowany w liście rozwijanej . Chcę wyświetlić wszystkie pola tej odpowiedzi na liście rozwijanej sugerowania automatycznego. Byłbym wdzięczny, gdyby ktoś mógł mnie w tym poprowadzić.

Chcę rekord wyświetla jak to w rozwijanej listy:

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

Z góry dzięki!

Answer 1

Twój bieżący kod jest zbyt proste, aby to osiągnąć, trzeba użyć template i remote to osiągnąć:

$('#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/                
}]); 

Wystarczy dać podstawową ideę, mam nadzieję, że to pomaga.