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

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

来自json文件的jquery ui autocomplete源代码

4 个答案: