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

我试图在文本框中使用JQuery自动完成从用户填充的邮编文本框中显示自动填充的城市名称。使用MVC 3级联文本框自动完成Razor和JQuery

城市文本框自动完成必须由触发，重点是控制。但我仍然需要按下向下键来显示自动完成的城市。此外，如果我更改邮政编码文本框中的值，自动完成将首先显示最后匹配的城市。任何人都有一个想法，我应该做些什么来解决这些问题？

这是我的代码。首先，查看：

<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); 
}

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

来源

2012-08-12 Flow

问题是你正在错误地使用'source'选项。

据当时资料：http://jqueryui.com/demos/autocomplete/#remote-jsonp 如果你点击查看源链接，你可以看到源采取以下形式：

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

，并在该函数内，响应时调用数据自动完成它的参数作为这样

data = []; 
response(data);

响应（）用于典型的自动填充功能，其中一个下拉显示的结果，这不正是你似乎要寻找的。

你的jQuery的另一个问题是，你的自动兼容性既是更新的目标，也是自动完成小部件，这与你所说的功能是相反的。您希望将Zip Code字段设置为自动填充窗口小部件，但可以抑制默认行为并在ajax成功时更新自动通信。

来源

2012-08-12 18:54:41

感谢您的帮助，因为您已经注意到我是jquery的初学者！如果我的问题仍然存在，我会更新我的代码并发布下面的结果！ – Flow 2012-08-13 13:18:34

我已更新了最新更改并附加了解释。 – Flow 2012-08-20 08:22:45

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

回答

相关问题