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。