使用 MVC 3 Razor 和 JQuery 在级联文本框中自动完成

Question

我正在尝试使用 JQuery Autocomplete 在文本框中显示自动完成的城市名称，该名称来自用户填写的邮政编码文本框。

城市文本框自动补全必须由关注控件触发。但我仍然必须按向下键才能显示自动完成的城市。 此外，如果我更改邮政编码文本框中的值，自动完成将首先显示最后匹配的城市。 任何人都知道我应该如何解决这些问题？

这是我的代码。 一、View：

<script type="text/javascript">
$(function () {
    $('#PostalCode').blur(function () {
        $.getJSON("http://xxxxxxxxx/Cities/GetCities", { strPostalCode: $('#PostalCode').val() }, function (data) {
            $("#autocompCities").autocomplete({
                minLength: 0,
                source: data
            }).focus(function () {
                $(this).autocomplete("search", "");
            });
        });
    });
});

...

@Html.TextBoxFor(model => model.PostalCode)
@Html.TextBoxFor(model => model.City, new { id = "autocompCities" })

然后，在我的控制器中：

public JsonResult GetCities(string strPostalCode)
{
//retrieving data
var cities = from city in allCities
                     where city.Id == strPostalCode
                     select city.Name;

        return Json(cities, JsonRequestBehavior.AllowGet);
}

仅供参考，我通过修改 getJSON 函数中的 url 解决了我的先例问题（从未调用过 JSONResult 函数），因为我认为使用“Url.Action”生成的路由与我的 global.asax 中映射的路由不匹配文件。

Answer 1

问题是您错误地使用了“来源”选项。

根据文档位于：http://jqueryui.com/demos/autocomplete/#remote-jsonp 如果点击查看源码链接，可以看到源码采用以下形式：

source: function(request, response) { ... }

在该函数中，使用自动完成的数据作为其参数调用响应

data = [];
response(data);

response() 用于典型的自动完成功能，其中下拉菜单显示结果，这与您所寻找的不完全一样。

您的 jquery 的另一个问题是您的 autocompCities 既是更新目标又是自动完成小部件，这与您所说的功能相反。您希望 Zip Code 字段成为自动完成小部件，但抑制默认行为并在 ajax 成功时更新 autocompCities。