使用来自 URL 的 JSON 的 jQuery UI 自动完成

Posted 2023-03-05

【中文标题】使用来自 URL 的 JSON 的 jQuery UI 自动完成

【英文标题】：jQuery UI autocomplete with JSON from URL

【发布时间】：2012-09-04 10:28:59

【问题描述】：

我正在使用 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
);

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

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

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

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

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

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

但这无济于事。我猜该服务不知道在输入字段中输入了哪个关键字？

任何指针都会很棒。

【参考方案1】：

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

简单字符串，或： 包含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=<term>。

【讨论】：

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

因此，如果您更改 Web 服务以返回正确的内容，但使用名为 query 的参数，您的代码将类似于上面的代码，只是您只需在 @987654332 中调用 response(data) @处理程序。换句话说，由于您要更改发生的默认 AJAX 请求，您仍然需要自己进行。

太好了，等我回到我的开发计算机上试试。通过写入 data: query: request.term ，将使用正确的输入作为查询参数调用 web 服务，对吗？

是的！ request.term 是用户搜索的词。