从json文件jquery ui自动完成源

问题描述：

我可以将jquery ui自动完成与来自数据库的源合并。怎么样，我想从准备JSON文件获得源代码，内容是这样的： -从json文件jquery ui自动完成源

{"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文件中提取数据的方式？直到你告诉它通过调用函数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); 
     }) 
    } 
});

也只是一个提示，你会通过命名一切“数据”来迷惑自己。

答

阿贾克斯可以用于此是指该article其中列出来自geonames.org国家（包含巨大的名单国家，州，地区）。这会以某种方式帮助你。

答

要想从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 
      }); 
     }); 
    } 
});

答

的问题是，你需要调用从阿贾克斯成功处理程序自动完成回调。

$(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

从json文件jquery ui自动完成源

相关推荐