ASP.Net MVC Jquery UI自動完成 - 當我調試時列表沒有顯示

Question

我在我的郵政編碼應用程序中實現了一個自動完成功能。我正在Firebug中進行調試，並且在控制檯中看到該操作正在執行，並且在結果列表中顯示了一個郵政編碼列表，但實際列表在調試時未顯示。

下面是我的客戶控制器的操作：

//the autocomplete request sends a parameter 'term' that contains the filter 
public ActionResult FindZipCode(string term) 
{ 
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term); 

    //return raw text, one result on each line 
    return Content(string.Join("\n", zipCodes)); 
} 

這裏的標記（略）

<% using (Html.BeginForm("Create", "Customers")) {%> 
<input type="text" value="" name="ZipCodeID" id="ZipCodeID" /> 
<% } %> 

，這裏是我打開我的腳本命令：

<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script> 
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/Scripts/jquery.ui.position.js"></script> 
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ZipCodeID").autocomplete({ source: '<%= Url.Action("FindZipCode", "Customers") %>'}); 
    }); 
</script> 

任何明顯我錯過了？就像我說的腳本抓取郵政編碼列表一樣，當我測試時，它們就不會顯示在我的頁面上。

編輯：我添加了一個圖像，顯示我在螢火蟲中看到的 - 看起來我得到我的郵政編碼，但不會顯示下拉菜單。

我也更新了我的文本框，以便它是UI的小部件DIV像這樣的內部：

<div class="ui-widget"> 
    <input type="text" name="ZipCodeID" id="ZipCodeID" /> 
</div> 

，這是我使用的腳本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ZipCodeID").autocomplete('<%= Url.Action("FindZipCode", "Customers") %>'); 
    }); 
</script> 

Answer 1

我能得到自動完成建議使用下面的代碼工作：

控制器：

public JsonResult FindZipCode(string term) 
    { 
     VetClinicDataContext db = new VetClinicDataContext(); 

     var zipCodes = from c in db.ZipCodes 
         where c.ZipCodeNum.ToString().StartsWith(term) 
         select new { value = c.ZipCodeID, label = c.ZipCodeNum}; 

     return this.Json(zipCodes, JsonRequestBehavior.AllowGet); 
    } 

標記：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#ZipCodeID").autocomplete({ 
        source: '<%= Url.Action("FindZipCode", "Customers") %>', 
     }); 
    }); 
</script> 

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div> 

Answer 2

幾個月前，當第一次設置自動完成時，我遇到了很大的問題。例如，像你這樣簡單的默認連接就沒有爲我工作。我必須指定所有內容，並附加結果函數。

這項工作100％，但它可能不適合你。但我希望它有幫助。把兩者都放在document.ready（）函數中。

$("#products").autocomplete('<%:Url.Action("GetProducts", "Product") %>', { 
    dataType: 'json', 
    parse: function (data) { 
     var rows = new Array(data.length), j; 
     for (j = 0; j < data.length; j++) { 
      rows[j] = { data: data[j], value: data[j].Title, result: data[j].Title }; 

     } 
     return rows; 
    }, 
    formatItem: function (row, y, n) { 
     return row.PrettyId + ' - ' + row.Title + ' (' + row.Price + ' €)'; 
    }, 
    width: 820, 
    minChars: 0, 
    max: 0, 
    delay: 50, 
    cacheLength: 10, 
    selectFirst: true, 
    selectOnly: true, 
    mustMatch: true, 
    resultsClass: "autocompleteResults" 
}); 
$("#products").result(function (event, data, formatted) { 
    if (data) { 

     var item = $("#item_" + data.PrettyId), 
        edititem = $("#edititem_" + data.PrettyId), 
        currentQuantity; 
     // etc... 
    } 
}); 

Answer 3

嘗試從您的控制器動作返回JSON：

public ActionResult FindZipCode(string term) 
{ 
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term); 
    return Json(new { suggestions = zipCodes }, JsonRequestBehavior.AllowGet); 
} 

也不要忘了，包括默認的CSS或者你可能看不到的建議DIV出現。