JSON数组的JQuery自动完成答案

【问题标题】：JQuery Autocomplete for JSON ArrayJSON数组的JQuery自动完成
【发布时间】：2013-03-25 17:06:43
【问题描述】：

我正在尝试在返回 JSON 数组（在 mimetype 应用程序/json 中）的服务上使用 JQuery 自动完成。我的开发基于以下示例：http://jqueryui.com/autocomplete/#remote-jsonp 从 Geonames 中检索 JSON。 geonames 示例中正确的 json 类似于

{"totalResultsCount":8387672,"geonames":[{"countryName":"Iran","adminCode1":"23","fclName":"mountain,hill,rock,... ","countryCode":"IR","lng":49.133333,"fcodeName":"mountain","toponymName":"Kūh-e Zardar","fcl":"T","name":"Kūh-e Zardar","fcode":"MT","geonameId":1,"lat":32.983333,"adminName1":"Lorestān","population":0}]}

很遗憾，我的服务只为我提供以下服务：

["berlin; berlin-steglitz","berliner festspiele"]

我也在尝试解析数组，但即使我得到正确的 Http 200 并且我看到响应是正确的，我也无法解析数组或使用它。没有调用来自 JQuery 的 .ajex 函数“成功”（我想是因为它需要一个 json 内容并检索一个文本），并且“完整”返回一个数据对象，没有检索 responseText 或数据内容的方法. 我不能使用请求类型“文本”，因为该服务位于另一个域中并且我打破了跨域模式。我的代码如下。

$(function() {
    $("#searchinput").autocomplete(
            {
                source : function(request, response) {

                    $.ajax(
                        {
                        url : "http://Mybackendservice.com/",
                        dataType : "jsonp",
                        data : {
                            query : request.term
                        },
                        complete : function(data) {
                            console.log(data);
                            for(i=0;i<data.length;i++){
                                console.log(data[i].parametername); /// do whatever you want here.
                            };
                            response($.map(data, function(n,i) {
                                return {
                                    label : n,
                                    value : i
                                }
                            }));
                        }
                    });
                },
                minLength : 2,
                select : function(event, ui) {
                    console.log(ui.item ? "Selected: " + ui.item.label
                            : "Nothing selected, input was " + this.value);
                },
                open : function() {
                    $(this).removeClass("ui-corner-all").addClass(
                            "ui-corner-top");
                },
                close : function() {
                    $(this).removeClass("ui-corner-top").addClass(
                            "ui-corner-all");
                }
            });
});

有人对如何处理解析这样一个数组的问题有一些建议吗？

【问题讨论】：

当您使用sucess 而不是complete 时会发生什么？（这里应该是success）。您是否也在发出跨域请求？否则你不应该需要jsonp。
@Andrew Whitaker 我提到它没有成功。而且我正在使用跨域请求，否则我会选择“文本”
failure 方法是否被执行？如果是这样，它会给你一个错误信息吗？另外，你确定你访问的服务器支持 JSONP 吗？
其实就是有效的JSON（使用JSONlint.com来验证）。不过，您的服务应该在响应前面加上回调函数的名称。
您可以使用YQL 之类的工具来创建 JSONP API，但我建议您在生产场景中使用自己的工具。

标签： jquery json jquery-ui jsonp

【解决方案1】：

JSONP 请求需要服务在响应前加上回调函数的名称。 JSONP page on Wikipedia提供了一些信息

【讨论】：