带有ajax和多个类别的jquery自动完成功能不起作用答案

【问题标题】：jquery autocomplete with ajax and multiple categories not working带有ajax和多个类别的jquery自动完成功能不起作用
【发布时间】：2014-04-24 10:31:08
【问题描述】：

我正在尝试使用远程 json 以及 categories http://jqueryui.com/autocomplete/#categories 制作 jquery 自动完成 http://jqueryui.com/autocomplete/#remote-jsonp。

远程 json 在 jquery 示例中不起作用。我无限期地得到加载微调器。有什么事吗？

我们如何将远程 json 与 category 结合起来？我试过做，但没有成功。该示例本身不起作用。

【问题讨论】：

标签： jquery ajax json jquery-ui jquery-ui-autocomplete

【解决方案1】：

jQuery UI 示例

Remote JSONP datasource autocomplete example 不工作，当然是因为自编写此示例以来，geonames.org webservice 已更改。

对http://ws.geonames.org/searchJSON 执行 GET 请求，您将得到一个包含以下消息的 json：

请在每次调用中添加用户名，以便地理名称能够识别调用应用程序并计算信用使用量。

在编写此示例时，可能会接受匿名呼叫，但现在不再如此。

自动完成：远程源 + 类别

只需结合 2 个 jquery ui 示例：

// 1. Extends the jquery ui autocomplete widget to manage categories

$.widget("custom.catAutocomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) { ... }
}

// 2. Then initialize your widget using a remote 
// data source and define each item category

$(...).catAutocomplete({
    source: function(request, response) {
        $.ajax({
            url: '...',
            success: function(data) {
                response($.map(data.data, function(item) {
                    return {
                        value: item.value,
                        label: item.label,
                        category: item.category
                    }
                }));
             }
          }
       }
});

我写了这个 jsFiddle 作为例子。它检索所请求用户的 Github 存储库，并按分叉数分组列出它们。

【讨论】：

谢谢。这个例子确实有帮助。