Typeaheadはリモートデータの結果を表示しません

Question

Typeaheadは提案を表示していません。これは非常に単純な都市検索です。データベースは正常に戻ります。コンソールが私の入力を記録しています。返信データを表示することはできません。

remote data 
{"recID":"3699","Name":"Dupage","City":"West Chicago","Country":"United States"} 


html 
<input class="typeahead" type="text" placeholder="Enter City" size="32"> 


script 
<script type="text/javascript">   
var cities = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('City'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: 'getAirports.php', 
    remote: { 
    url: 'getAirports.php?query=%QUERY', 
    wildcard: '%QUERY' 
    } 
}); 

$('.typeahead').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1 
}, { 
    name: 'City', 
    display: 'City', 
    source: cities, 
    templates: { 
    suggestion: function (data) { 
     return data.City; 
    } 
} 

}); 
     </script> 

Answer 1

リモートデータの形式が正しくありません。これは有効なJSONオブジェクトではありません。また、有効なJavaScript配列でもありません。あなたはそれを動作させることができるかもしれませんが、オブジェクトまたは配列を作成するために返されたデータを解析する必要があります。

データがオブジェクトとして返された場合：{recID:"3699", Name:"Dupage", City:"West Chicago", Country:"United States"}、それが動作するはずです。現在、存在しないオブジェクトdata.Cityを参照しようとしています。