ajax - jqueryuiオートコンプリートでローカルソースとリモートソースを組み合わせる

Question

一般的に使用される用語のリストをJavaScriptにローカルに含めました。次に、ajax応答を介してサーバーからjson応答を取得したいと思います。どのようにそれを行うことができますか？

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

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

次に、ajaxからの結果を追加しますか？

Answer 1

これを実行する方法は、サーバーから取得した結果をローカルの結果配列と組み合わせることです。sourceこれは、オートコンプリートのオプションに関数を渡すことで実現できます。

実行する必要がある3つのステップがあります。

1. AJAXリクエストを作成し、サーバーから結果を取得します。
2. ローカル配列をフィルタリングする
3. 結果を組み合わせる

これはかなり単純なはずです。このようなものが機能します：

$("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/