Typeahead not displaying results with remote data

Question

Typeahead is not displaying Suggestions. This is a very simple city lookup. The database returns fine. The console is logging my typing. Just cannot get the return data to display.

    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>

Same result. I did add ?query= ("getAirports.php?query=") to the end of the prefetch as well. Still no data returning. It may be because the array is key value. Have been looking everywhere for a solution. — pcm70, Mar 30 '16 at 20:49

score 0 · Accepted Answer · answered Mar 30 '16 at 21:25

The remote data is not in a correct format. It is not a valid JSON object. It's also not a valid JavaScript array. You may be able to get it working, but it would require you to parse the data returned to create an object or an array.

If your data came back as an object: {recID:"3699", Name:"Dupage", City:"West Chicago", Country:"United States"}, then it should work. Right now you are attempting to refer to an object data.City that doesn't exist.

Typeahead not displaying results with remote data

1 Answers1