处理来自 ajax 调用的返回答案

【问题标题】：processing return from ajax call处理来自 ajax 调用的返回
【发布时间】：2013-08-08 11:16:46
【问题描述】：

我正在使用 twitter-bootstrap 的 typeahead 对输入字段进行自动补全。

到目前为止我所拥有的：

$(".airportSearch").typeahead({
    source: function(typeahead, query) {
        $.ajax({
            url: url_,
            dataType: "json",
            data: {
                n: 12,
                q: typeahead
            },
            success: function(data) {
                var return_list = [], i = data.length;
                while(i--) {
                    return_list[i] = {
                        type: data[i].type,
                        id: data[i].iata,
                        value: data[i].city,
                        returnvalue: data[i].type == 'city' ? data[i].city + ' [' + data[i].iata + ']' :
                            data[i].city + ' (' + data[i].iata + ')'
                    };
                }

            }
        });
    }
});

输出示例：

[{"type":"airport","city":"Quebec","airport":"Quebec","iata":"YQB","country":"Canada","locationId":"airport_YQB"},
{"type":"airport","city":"Queenstown","airport":"Queenstown","iata":"ZQN","country":"New Zealand","locationId":"airport_ZQN"},
{"type":"city","city":"Setif","airport":"All Airports","iata":"QSF","country":"Algeria","locationId":"DZ_city_QSF"},
{"type":"airport","city":"Setif","airport":"Setif","iata":"QSF","country":"Algeria","locationId":"airport_QSF"},
{"type":"airport","city":"QachaS Nek","airport":"QachaS Nek","iata":"UNE","country":"Lesotho","locationId":"airport_UNE"},
{"type":"airport","city":"Qaisumah","airport":"Qaisumah","iata":"AQI","country":"Saudi Arabia","locationId":"airport_AQI"}]

我已经记录了我创建的 return_list 变量，并确认它是我创建的预期对象列表。我想用对象列表中的返回值字符串填充自动完成选项。

谁能告诉我怎么做，或者给我指个地方告诉我怎么做？

【问题讨论】：

标签： ajax twitter-bootstrap bootstrap-typeahead

【解决方案1】：

试试这个：

$(".airportSearch").typeahead({
    source: function(typeahead, process) {
        return $.ajax({ // return ajax result
            url: url_,
            dataType: "json",
            data: {
                n: 12,
                q: typeahead
            },
            success: function(data) {
                var return_list = [], i = data.length, data_vals = []; // add data_vals array for typeahead
                while(i--) {
                    return_list[i] = {
                        type: data[i].type,
                        id: data[i].iata,
                        value: data[i].city,
                        returnvalue: data[i].type == 'city' ? data[i].city + ' [' + data[i].iata + ']' :
                            data[i].city + ' (' + data[i].iata + ')'
                    };

                    data_vals.push(return_list[i].returnvalue); // populate the needed values
                }
                return process(data_vals); // and return to typeahead
            }
        });
    }
});

通常我只会填充 data_vals 用于预先输入，但我猜你这样做是出于你的原因。

希望对你有帮助。

【讨论】：

谢谢 Hieu，我不确定 ajax 调用是如何工作的（网上没有找到很好的解释），所以我不确定发生了什么。这会处理调用返回的数据吗？（我在 OP 中包含了一个示例）另外，我假设您的意思是“返回查询（data_vals）；”而不是“return process(data_vals);”，因为当我使用“process”时，控制台会记录“Uncaught ReferenceError: process is not defined”
啊，对，我没有注意到您对source 回调使用了不同的参数。通常我会使用source: function (query, process) {。是的，它是处理 AJAX 调用的响应。