Question

我必须很厚，因为我不能为我的生活让jQuery自动完成工作。我搜索了很多例子，似乎大多数都使用旧版本的jQuery。我直接从jQuery UI站点找到了一个相当不错的例子：http://jqueryui.com/demos/autocomplete/#remote-jsonp所以我在那个例子之后建模了我。当我输入我的输入框时，输入框下方会弹出一个小的自动完成框，但自动完成框中没有任何内容。我的数据没有被jQuery正确加载。

我的数据源是一个返回JSON数据的URL。示例：[{"pk": 1, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "TBA"}}, {"pk": 2, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "UB 2008"}}]

我的Javascript代码：

$(document).ready(function() {
    $("input#id_location_address").autocomplete({
        max: 10,

        source: function(request, response) {               
            $.ajax({
                url: "/concierge/autocomplete/locations/",
                dataType: "json",
                data: request,
                success: function( data ) {
                    console.log( data )
                    response( data, function(item) {
                        return { label: item.address, value: item.address }
                    });
                }
            });
        }
    });
});

因此，当我在Firebug中console.log(data)时，它会显示具有所有数据的对象。我想我没有在我的Javascript代码中正确访问'地址'。真的，我只想在自动填充框中弹出“地址”。我该怎么做？

提前致谢，

克里斯

Answer 1

我明白了。需要循环遍历json对象数组，然后将数据放入数组中。我想到了从defualt jQuery UI示例http://jqueryui.com/demos/autocomplete/#default

返回一个数组

$('input#id_location_address').keyup( function() {
    $("input#id_location_address").autocomplete({
        source: function(request, response) {
            $.ajax({
                    url: "/concierge/autocomplete/locations/",
                    dataType: "json",
                    data: request,
                    success: function( data ) {
                        // loop through data and return as array
                        items = new Array();
                        for(item in data) items.push( data[item].fields.address );
                        response( items );
                    }
            });
        }
    });
});

Answer 2

尝试：

response($.map(data, function(item) {
    return {
        label: item.fields.address, // item.FIELDS ;)
        value: item.fields.address
    }
}));

实际上，响应期望数组作为参数。 $ .map遍历数据项，并从传递的mutator方法中形成一个返回值的新数组。完成后，$ .map返回新数组，该数组将是response（）的参数。

Answer 3

尝试

response($.map(data, function(item) {
    return {
        label: item.fields.address,
        value: item.fields.address
    }
}));

查看此demo

的来源

在jQuery 1.4.2 jQuery UI 1.8.3中自动完成

3 个答案: