jQuery UI自動完成：菜單不顯示

Question

我試圖使用自動完成的小部件，通過AJAX請求從遠程源獲取其數據。數據應該作爲AddressController上GetDistricts Action方法的JSON結果。不幸的是，當我輸入文本框時，菜單不會彈出。我檢查了Firebug的響應，一切似乎好： {"districtNames":["Beirut","Bekaa","Mount Lebanon","South","Nabatieh","North"]}，所以我真的不知道發生了什麼事情......這裏是我的jQuery代碼：

  district.autocomplete({ 
       minLength: 2, 
       source: function (request, response) { 
        $.ajax({ 
         type: "GET", 
         url: '@Url.Action("GetDistricts", "Address")', 
         dataType: "json", 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { 
            label: item.text, 
            value: item.text 
           } 
          })) 
         } 
        }) 
       } 
      }); 

這是我的操作方法：

public ActionResult GetDistricts(string term) 
    { 
     var districts = _service.GetDistricts(); 
     var districtNames = from c in districts select c.Name; 
     return Json(new {districtNames}, JsonRequestBehavior.AllowGet); 
    } 

PS：我嘗試使用本地數據，其中源是一個數組，它工作得很好。所以我不認爲這是與CSS有關......

Answer 1

控制器操作中的結果數組不是小部件所期望的格式。自動完成需要一個字符串數組（或具有value和label屬性的對象數組），而不是具有單個屬性的對象，其值是字符串數組。

public ActionResult GetDistricts(string term) 
{ 
    var districts = _service.GetDistricts(); 
    var districtNames = from c in districts select c.Name; 
    return Json(districtNames, JsonRequestBehavior.AllowGet); 
} 

如果你把這個路線，你甚至可以用去除大量的$.ajax代碼脫身，並讓自動完成照顧它：

你可以通過更新控制行動解決這個問題：

district.autocomplete({ 
    minLength: 2, 
    source: '@Url.Action("GetDistricts", "Address")' 
}); 

---

或者你可以按摩你的數據只是一個位$.ajaxsuccess回調中：

district.autocomplete({ 
    minLength: 2, 
    source: function (request, response) { 
     $.ajax({ 
      type: "GET", 
      url: '@Url.Action("GetDistricts", "Address")', 
      dataType: "json", 
      success: function (data) { 
       response($.map(data.districtNames, function (item) { 
        return { 
         label: item.text, 
         value: item.text 
        } 
       })); 
      } 
     }); 
    } 
}); 

注是$.map調用與data.districtNames。