在jquery ui自动完成中结合本地源和远程源答案

【问题标题】：Combining a local source and remote source in jquery ui autocomplete在jquery ui自动完成中结合本地源和远程源
【发布时间】：2012-12-12 04:33:29
【问题描述】：

我在javascript本地包含了一个常用术语的列表，然后我也想通过ajax响应从服务器获取json响应。怎么办？

var projects = ["apple", "orange"];

$('#search').autocomplete({
    source: projects
});

然后追加ajax的结果？

【问题讨论】：

也就是说，如果本地结果不存在，进行AJAX调用？还是您总是想进行 AJAX 调用？
实际上无论如何都要按顺序进行ajax调用。换句话说，如果你有两个来源，并且你没有在服务器端进行组合，有没有办法通过 javascript 组合来自两个来源的结果？
是的，有。我想我有足够的信息来发布答案

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

【解决方案1】：

您可以采用的方法是将您从服务器返回的结果与本地结果数组结合起来。您可以通过将函数传递给自动完成的source 选项来完成此操作：

您必须执行三个步骤：

发出 AJAX 请求并从服务器获取结果。
过滤本地数组
合并结果

这应该很简单。像这样的东西会起作用：

$("input").autocomplete({
    source: function(request, response) { 
        /* local results: */
        var localResults = $.ui.autocomplete.filter(localArray, request.term);

        /* Remote results: */
        $.ajax({
            /* AJAX options omitted... */
            success: function(data) {
                /* Process remote data using $.map, if necessary, then concatenate local
                 * and remote results. 
                 */
                response(data.concat(localResults));
            }
        });
    }
});

我在这里编写了一个完整的示例：http://jsfiddle.net/FZ4N4/

【讨论】：

如果您想显示本地结果，然后在远程结果可用时附加远程结果怎么办？
好吧，我觉得自己很愚蠢。您只需使用新结果再次调用 response()。