Cách trả lời JSON bằng cách sử dụng thư viện typeahead.js mới nhất

Question

Tôi có một hộp tìm kiếm trong ứng dụng của tôi, nơi người dùng có thể tìm kiếm chi tiết bệnh nhân được lưu trữ trong cơ sở dữ liệu. họ sẽ gõ vào tên của bệnh nhân và máy chủ sẽ trả lời lại với phản hồi JSON với tất cả các chi tiết. Để tạo điều kiện cho chức năng như vậy, tôi đang sử dụng phiên bản mới nhất typeahead.js.

Đây là mã javascript của tôi:

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

Mã này mang lại cho tôi sau JSON phản ứng:

[ 
{ 
    "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" 
} 
] 

Khi thư viện typeahead cố gắng để làm cho phản ứng này, tôi luôn thấy không xác định trong danh sách thả xuống . Tôi muốn hiển thị tất cả các trường của phản hồi này trong danh sách thả xuống đề xuất tự động. Tôi sẽ đánh giá cao nếu ai đó có thể hướng dẫn tôi làm như vậy.

Tôi muốn hiển thị kỷ lục như thế này trong danh sách thả xuống:

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

Cảm ơn trước!

Answer 1

mã hiện tại của bạn quá đơn giản để đạt được điều đó, bạn cần phải sử dụng template và remote để đạt được điều đó:

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

Chỉ cần để cung cấp cho bạn những ý tưởng cơ bản, hy vọng nó sẽ giúp.