Jquery UI自动完成的源代码来自json文件 - jquery ui autocomplete source from json file

jquery ui autocomplete source from json file

本文关键字：源代码 json 文件 UI Jquery | 更新日期: 2023-09-27

我可以合并jquery ui自动完成与源数据库。如何，我试图从准备好的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文件中提取数据的方式?

自动补全不会显示任何内容，直到您通过使用允许的自动补全值调用传递给源方法的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);
        })
    }
});

还有一个提示，如果你把所有的东西都命名为"data"，你会把自己弄糊涂的。

Ajax可用于此，请参阅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
          });
       });
    }
});

问题是，您需要从ajax成功处理程序调用自动完成回调。

$(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);
            })
        }
    });
})

演示:恰好