jquery ui autocomplete source from json file

Question

Я могу включить jquery ui autocomplete с источником из базы данных. Как я пытаюсь получить источник из подготовленного файла JSON, содержание, как это: -

{"data":[{"id":"1","country_name_en":"USA","country_name_hk":"\u7f8e\u570b"},{"id":"2","country_name_en":"China","country_name_hk":"\u4e2d\u570b"},{"id":"3","country_name_en":"British","country_name_hk":"\u82f1\u570b"}]} 

Я попытался изменить коды Jquery следующим образом: -

<script> 
$("#country").autocomplete({ 
    source: function(request,response) { 
     $.getJSON('../../database/country.json',{id: data.id},function(data){ 
      alert(data); 
     }) 
    } 
}); 
</script> 

, но я думаю, Я не написал формат правильно. Как мне улучшить способ извлечения данных из json-файла?

Answer 1

Автозаполнение ничего не покажет, пока вы не сообщите об этом, вызвав функцию response, переданную вашему исходному методу с допустимыми значениями автозаполнения. Так что вы должны сделать что-то вроде этого:

$("#country").autocomplete({ 
    source: function(request,response) { 
     $.getJSON('../../database/country.json',{id: data.id},function(data){ 
      var choices = []; 
      for(var i=0;i<data.data.length;i++) { 
       choices.push(data.data[i].country_name_en); 
      } 
      response(choices); 
     }) 
    } 
}); 

Кроме того, только наконечник, вы собираетесь, чтобы запутать себя, называя все «данные».

Answer 2

Ajax может использоваться для этого. article, в котором перечислены страны с сайта geonames.org (содержит огромную страну, страну, регион). Это поможет вам каким-то образом.

Answer 3

Чтобы получить данные из JSON попробовать это ..

$("#country").autocomplete({ 
    source: function(request, response) { 
     $.getJSON('../../database/country.json', { id: data.id }, function(data) { 
      $.each(data, function(key, value) { 
       alert(value.country_name_en); // json data 
      }); 
     }); 
    } 
}); 

Answer 4

Проблема заключается в том, что вам нужно вызвать автозаполнения обратного вызова из обработчика АЯКС успеха.

$(function() { 
    $("#country").autocomplete({ 
     source : function(request, response) { 
      $.getJSON('country.json', { 
       id : 1 
      }, function(data) { 
       var list = $.map(data.data, function(item, index) { 
        return { 
         id : item.id, 
         label : item.country_name_en 
        }; 
       }); 
       response(list); 
      }) 
     } 
    }); 
}) 

Демо: Plunker