Question

我正在尝试使用自动填充功能来回馈“提供商”列表。通过反复试验显示的唯一结果是'[object object]'。其他一切都是'没有搜索结果'。有人能指出我的方向，我会非常感激。

编辑：这是在本地使用。没有网络服务器等。

<form id="searchform" method="get" role="search">
                <input id="searchfield" />
                <input type="submit" name="go" value="go!" />
            </form>


<script src='js/jquery-1.11.0.min.js'></script>
<script src="js/autocomplete/jquery-ui-1.10.3.custom.js" type="text/javascript" charset="utf-8"></script>

<script>
    $(function() {
    $.ajax({
        url: "json/Providers.json",
        dataType: "json",
        success: function(data) {
            var cat_data = $.map(data, function(item) {
                return {
                    ProviderID: item.ProviderID,
                    Name: item.Name,                  
                };
            });
            $("#searchfield").autocomplete({
                delay: 0,
                source: cat_data,
                minlength:0
            });
        }
    });
});
</script>

json格式

   {"Providers":[{"ProviderID":"3","NAME":"name1"}, 
    {"ProviderID":"4","NAME":"name2"},  
    {"ProviderID":"5","NAME":"name3"}]}

Answer 1

您需要将data更改为data.Providers，还有其他一些错误

$(function() {
    $.ajax({
        url: "json/Providers.json",
        dataType: "json",
        success: function(data) {
            var cat_data = $.map(data.Providers, function(item) {
                return {
                    value: item.ProviderID,
                    label: item.NAME

                };
            });
            $("#searchfield").autocomplete({
                delay: 0,
                source: cat_data,
                minlength:0
            });
        }
    });
});

Answer 2

  $("#searchfield").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "json/Providers.json",
                    type: "GET",
                    dataType: "json",
                    function (data) {
                        response(jQuery.map(data, function (item) {
                            return { label: item.Name, value: item.ProviderID };
                        }));
                    },
                    error: function (error) {
                        console.log(error);
                    }
                }); //end of jQuery.ajax({
            }
        })

自动完成不提供JSon文件的结果

2 个答案: