使用来自 URL 的 JSON 的 jQuery UI 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12370614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI autocomplete with JSON from URL
提问by Kim Andersen
I'm using the jQuery UI Autocomplete function. I can make it work with the example provided with jQuery UI like this:
我正在使用 jQuery UI 自动完成功能。我可以使用 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
});
This works without any problems. But I need to use JSON as my data source who can be retrieved like this: http://mysite.local/services/suggest.ashx?query=ball
这没有任何问题。但我需要使用 JSON 作为我的数据源，可以像这样检索：http://mysite.local/services/suggest.ashx?query=ball
If I'm going to that URL I get JSON back like this:
如果我要去那个 URL，我会像这样返回 JSON：
[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}]
How can I use my URL as the data source?
如何使用我的 URL 作为数据源？
I've tried changing the source-option like this:
我试过像这样更改源选项：
$("#tags").autocomplete({
source: "http://mysite.local/services/suggest.ashx"
});
But it doesn't help. I guess that the service doesn't know which keyword has been typed in the input field or so?
但它没有帮助。我猜该服务不知道在输入字段中输入了哪个关键字？
Any pointers would be great.
任何指针都会很棒。
回答by Andrew Whitaker
You need to change your source to meet the following specifications (outlined in the documentationfor the widget). The source must be an array containing (or return an array containing):
您需要更改源以满足以下规范（在小部件的文档中概述）。源必须是一个包含（或返回一个包含）的数组：
- Simple strings, or:
- objects containing a
labelproperty, avalueproperty, or both.
- 简单字符串，或：
- 包含
label属性、value属性或两者的对象。
If for some reason you cannot change what your remote source is returning, you can transform the data once it has successfully retrieved. Here's how you would do that:
如果由于某种原因您无法更改远程源返回的内容，则可以在成功检索数据后对其进行转换。以下是你将如何做到这一点：
$("#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([]);
}
});
});
});
As you can see, you'll need to make the AJAX call yourself by passing in a function to the sourceoption of the widget.
如您所见，您需要通过将函数传递给source小部件的选项来使 AJAX 调用自己。
The idea is to use $.mapto transform your array into an array that contains elements that the autocomplete widget can parse.
这个想法是用来$.map将您的数组转换为包含自动完成小部件可以解析的元素的数组。
Also notice that the dataparameter passed to the AJAX call should end up as ?query=<term>when the user types a term.
另请注意，data传递给 AJAX 调用的参数应?query=<term>在用户键入术语时结束。
