jquery - 带有ajax的jquery自动完成功能不起作用

Question

这是我的代码：

<script type="text/javascript">
$(document).ready(function () {
    $(".list tr:even").addClass("even");
    var cityList = [];
    $("#autocomplete").autocomplete({
        source: function () {
            $.ajax({
                type: "POST",
                url: "flight/fillcitydropdownlist",
                data: "{'cityname':'" + $('#autocomplete').val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.cities.length > 0) {
                        for (var i = 0; i < data.cities.length; i++) {
                            cityList.push(data.cities[i].Main);
                        }
                    }
                    return cityList;
                }
            })
        }
    })
});

我不明白为什么这不起作用。在页面底部添加了 ul 元素，但没有添加 li 。尽管 cityList 已填满。问题是否与我如何将数组传递给自动完成源有关？

Answer 1

您不能从源函数返回值，它接收回调函数作为第二个参数，一旦响应返回，您需要将响应数据传递给回调函数

$(document).ready(function () {
    $(".list tr:even").addClass("even");
    var cityList = [];
    $("#autocomplete").autocomplete({
        source: function (request, callback) {
            $.ajax({
                type: "POST",
                url: "flight/fillcitydropdownlist",
                data: "{'cityname':'" + request.term + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    callback($.map(data.cities, function(obj){
                        return obj.Main
                    }))
                }
            })
        }
    })
});