使用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

回答

相關問題