jQuery 1.4.2 中的自动完成功能 jQuery UI 1.8.3答案

【问题标题】：Autocomplete in jQuery 1.4.2 jQuery UI 1.8.3jQuery 1.4.2 中的自动完成功能 jQuery UI 1.8.3
【发布时间】：2010-08-16 19:50:43
【问题描述】：

我一定很厚，因为我一辈子都无法让 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 代码中正确访问“地址”。真的，我只想在自动完成框中弹出“地址”。我该怎么做？

提前致谢，

克里斯

【问题讨论】：

标签： javascript jquery json autocomplete

【解决方案1】：

我想通了。需要循环遍历 json 对象数组，然后将数据放入数组中。我想到了从默认的 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 );
                    }
            });
        }
    });
});

【讨论】：

【解决方案2】：

试试：

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

确实，响应需要一个数组作为参数。 $.map 遍历数据项并从传递的 mutator 方法形成一个新的返回值数组。完成后，$.map 将返回新数组，该数组将作为 response() 的参数。

【讨论】：

是的，我之前尝试过（现在再次尝试验证）但它不起作用。自动完成框仍然是空的。

【解决方案3】：

试试

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

查看此demo的来源

【讨论】：