jQueryUI从URL使用JSON自动完成

我正在使用jQueryUI自动完成功能。我可以使用jQuery UI提供的示例，如下所示：

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#tags").autocomplete({
    source: availableTags
});

 [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

$("#tags").autocomplete({
    source: "http://mysite.local/services/suggest.ashx"
});

这项工作没有任何问题。但我需要使用JSON作为我的数据源，可以像这样检索：

如果我要访问该URL，我会像这样返回JSON：

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#tags").autocomplete({
    source: availableTags
});

 [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

$("#tags").autocomplete({
    source: "http://mysite.local/services/suggest.ashx"
});

如何使用我的URL作为数据源

我尝试过这样更改源选项：

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#tags").autocomplete({
    source: availableTags
});

 [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]

$("#tags").autocomplete({
    source: "http://mysite.local/services/suggest.ashx"
});

但这没用。我猜服务不知道在输入字段中键入了哪个关键字

---

任何指针都很好。

您需要更改源代码以满足以下规范（在小部件的中概述）。源必须是包含以下内容的数组（或返回包含以下内容的数组）：

• 简单字符串，或：
• 包含

  标签

  属性、

  值

  属性或两者的对象

如果由于某种原因无法更改远程源返回的内容，则可以在成功检索数据后对其进行转换。以下是您将如何做到这一点：

$("#tags").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://mysite.local/services/suggest.ashx",
            data: { query: request.term },
            success: function (data) {
                var transformed = $.map(data, function (el) {
                    return {
                        label: el.phrase,
                        id: el.id
                    };
                });
                response(transformed);
            },
            error: function () {
                response([]);
            }
        });
    });
});

如您所见，您需要通过向小部件的

source

选项传递一个函数来调用AJAX

其思想是将数组转换为一个数组，该数组包含autocomplete小部件可以解析的元素

---

还请注意，当用户键入术语时，传递给AJAX调用的

数据

参数应以

？query=

结束。

谢谢您的回答。我想我可以将返回的JSON编辑为标签和值，而不是id和短语。但是，如果我更改返回的JSON，我在示例中是否使用了正确的源代码，或者我是否必须以某种方式将键入的文本发送到服务。我的意思是该服务需要一个名为“query”的参数，所以在某种程度上，我猜它也需要将该参数发送给它。或者我完全离开了这里？因此，如果您更改web服务以返回正确的内容，但使用名为

query

的参数，您的代码将与上面的代码类似，只是在

success

处理程序中调用

response（data）

。换句话说，既然您正在更改发生的默认AJAX请求，那么您仍然需要自己来做。太好了，当我回到我的开发计算机时，我会尝试一下。通过写入数据：{query:request.term}，将使用正确的输入作为查询参数来调用webservice，对吗？是的<代码>请求。术语是用户搜索的术语。