1

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

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

这是我的代码。一、观点：

<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 文件中映射的路由不匹配。

4

1 回答 1

3

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

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

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

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

data = [];
response(data);

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

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

于 2012-08-12T18:54:41.193 回答