CODEWITHSUNDEEP
javascriptjqueryjsonautocomplete
Rhys Edwards
Rhys Edwards

Reputation: 791

jquery autocomplete with external json source

I have an autocomplete function that was working with a local json source. Given that it's 16k lines of code, I want to move this to an external json file. However I can't seem to get it working with the external source file. Can anyone point me in the right direction? At the moment this code does not work, but also does not return any errors to the console.

Autocomplete script

$(function() {
  $.ajax({
    url: "javascripts/airports.json",
    dataType: "json",
    success: function(request, response) {
             var data = $.grep(suggestion, function(value) {
               return value.city.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase();
             });
  $('#autocomplete').autocomplete({
  minLength: 1,
  source: data,
  focus: function(event, ui) {
              $('#autocomplete').val(ui.item.city,ui.item.country);
              return false;
    },
  select: function(event, ui) {
    $('#autocomplete').val(ui.item.name);
      return false;
      }
      }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
          .data( "ui-autocomplete-item", item )
            .append( "<a>" + item.city + "," + item.country + "</a>" )
              .appendTo( ul );
          };
        }
    });
  });

External data structure

var suggestion =
  [
  {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"2","name":"Madang","city":"Madang","country":"Papua New Guinea","iata":"MAG","icao":"AYMD","latitude":"-5.207083","longitude":"145.7887","altitude":"20","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"3","name":"Mount Hagen","city":"Mount Hagen","country":"Papua New Guinea","iata":"HGU","icao":"AYMH","latitude":"-5.826789","longitude":"144.295861","altitude":"5388","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"4","name":"Nadzab","city":"Nadzab","country":"Papua New Guinea","iata":"LAE","icao":"AYNZ","latitude":"-6.569828","longitude":"146.726242","altitude":"239","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"5","name":"Port Moresby Jacksons Intl","city":"Port Moresby","country":"Papua New Guinea","iata":"POM","icao":"AYPY","latitude":"-9.443383","longitude":"147.22005","altitude":"146","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
]

Upvotes: 1

Views: 395

Answers (1)

Dekel
Dekel

Reputation: 62556

Your response should be a JSON object (array) where each item is an object with id, label and value keys.

The items in your json files doesn't have the label and value keys, so the autocomplete can't really show them.

Best solution - change the content of the file/response to follow the id/label/value structure.

If you can't do this - you can use the _renderItem function to create your own items in the autocomplete based on the content of the json file:

$('#autocomplete').autocomplete({
    ...
    _renderItem: function( ul, item ) {
        return $( "<li>" )
            .append( item.name )
            .appendTo( ul );
    }
    ...
});

Upvotes: 1

Related Questions