Jquery自动完成不起作用 - 没有搜索结果

Question

我在 ajax 调用中创建一个国家列表，它是一个对象数组：

$.ajax({
    url: '//maps.googleapis.com/maps/api/geocode/json?address=' + zipCode + '&region=AT',
    type: 'GET',
    dataType: 'json',
    success: function (res){
        var countryList = [];

        ... ...
        ... ...

        countryList.push({
            label: countryCode + ' ' + countryName,
            value: result[0]['id'],
            countryId: result[0]['id'],
            countryCode: countryCode,
            countryName: countryName,
            city: city
        });

        zipCodeSelector.autocomplete({
            source: countryList
        });

    }

})

自动完成的响应是

没有搜索结果

对象看起来像这样：

[Object]
0: Object
    city: "Berlin"
    countryCode: "DE"
    countryId: "a7c40f631fc920687.20179984"
    countryName: "Germany"
    label: "DE Germany"
    value: "a7c40f631fc920687.20179984"

我在 ajax 中调用自动完成功能。这是问题还是有其他问题？

Answer 1

您可以在源选项中调用您的 ajax 方法，而不是先填充数组。

source 选项接受自定义函数，请参阅：

功能：第三种变体，回调，提供了最 灵活性，可用于将任何数据源连接到 自动完成。回调有两个参数：一个请求对象，带有 单个术语属性，它指的是当前在 文字输入。例如，如果用户在城市字段中输入“new yo”， 自动完成术语将等于“新哟”。一个响应回调，它 需要一个参数：向用户建议的数据。这个数据 应根据提供的术语进行过滤，并且可以在任何 上述格式用于简单的本地数据。重要的是什么时候 提供自定义源回调来处理期间的错误 要求。您必须始终调用响应回调，即使您 遇到错误。这可确保小部件始终具有 正确的状态。在本地过滤数据时，您可以使用 内置 $.ui.autocomplete.escapeRegex 函数。这将需要一个 字符串参数并转义所有正则表达式字符，生成结果 安全地传递给 new RegExp()。

代码：

$("#autocomplete").autocomplete({
    source: function (req, resp) {
        $.ajax({
            url: '//maps.googleapis.com/maps/api/geocode/json?latlng=55.397563, 10.39870099999996&sensor=false',
            type: 'GET',
            dataType: 'json',
            success: function (res) {
                resp($.map(res.results, function (item) {

                    return {
                        label: item.formatted_address,
                        value: item.place_id
                    };
                }));
            }

        })
    }
});

演示：http://jsfiddle.net/vzhjstuf/

Answer 2

尝试像这样访问您的 JSON 内容，因为您在 ajax 调用中指定期望在 res 上采用 JSON 格式的数据。

要访问 JSON 的属性，请执行以下操作，然后将其推送到另一个数组。

res[0].city;
res[0].countryCode;

对象规则的访问属性是：

Object.property