使用URL中的JSON进行jQuery UI自动完成

我正在使用jQuery UI自动完成function。 我可以使用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 }); 

这没有任何问题。 但我需要使用JSON作为我的数据源，可以像这样检索： http：//mysite.local/services/suggest.ashx？query = ball

如果我要去那个URL，我会像这样得到JSON：

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

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

我试过像这样更改source-option：

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

但它没有帮助。 我猜这个服务不知道在输入字段中输入了哪个关键字？

任何指针都会很棒。

Answer 1

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

• 简单的字符串，或：
• 包含label属性， value属性或两者的对象。

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

 $("#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调用。

我们的想法是使用$.map将您的数组转换为包含自动完成小部件可以解析的元素的数组。

另请注意，当用户键入术语时，传递给AJAX调用的data参数应最终为?query= 。