php - 来自json文件的jquery ui自动完成源

Question

我可以将 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 文件中提取数据的方式？

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 可用于此参考这篇文章，其中列出了 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

问题是，您需要从 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);
            })
        }
    });
})

演示：Plunker