使用MVC的jQuery UI自动完成无法显示返回的项目

Question

我现在一直在反对这个问题,我不知道我做错了什么.

我对我的一个控制器进行了非常简单的JSON调用,我希望使用jquery ui autocomplete返回客户端名称以及相关的ID值.我可以在Firebug中看到结果,但自动完成总是返回一个空列表.

由jquery生成的列表中的项目数是正确的 - 例如,如果我返回3结果,那么我看到带有3个空白列表项的建议菜单.问题似乎是jquery没有正确解析我的响应.

我没有在文本框上使用jquery验证,因为这里提出了一些其他问题.

如果这有所不同,我在本地运行它.

下面是我使用的jquery/HTML:

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">        google.load("jquery", "1.6.4")</script>
<script type="text/javascript">        google.load("jqueryui", "1.8.16")</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#clientEntered").autocomplete({
            source: '@Url.Action("ClientAutoSuggest", "Clients")'
        });
    });

</script>

<input type="text" name="clientEntered" id="clientEntered" />

我的控制器看起来像这样:

public JsonResult ClientAutoSuggest(string term)
    {
        var filteredClients = (from c in clientService.GetClients()
                               where c.Name.ToLower().StartsWith(term.ToLower())
                              select new { ClientID = c.ClientID, Name = c.Name }).Take(10);

        return Json(filteredClients, JsonRequestBehavior.AllowGet);
    }

如上所述,我确实看到结果在Firebug中传回,但生成的列表始终为空.

示例 - 如果返回2个结果,我将在Firebug中看到2个结果:

[{"ClientID":1,"Name":"Client 1"},{"ClientID":2,"Name":"Client 2"}]

如果我查看生成的源代码,我会看到以下内容(正确2项但空白):

<ul style="z-index: 1; top: -16px; left: 0px; display: block; width: 1864px; position: relative;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li></li><li></li></ul>

我已经尝试了不同的配置来解析响应,但我尝试的任何东西似乎都没有用.任何建议或帮助都会很棒,谢谢!

编辑:感谢Kevin的回答如下.问题在于没有正确映射响应.下面的代码现在很好用.

$("#clientEntered").autocomplete({
            source: function(request, response) {
            $.ajax({
              url: '@Url.Action("ClientAutoSuggest", "Clients")',
              data: request,
              dataType: "json",
              type: "POST",
              success: function(data){
                  response($.map(data,function(item){
                  return { label: item.Name,value: item.Name, id: item.ClientId }
                  }));
              }
            });
           },
        });

Answer 1

我没有看到任何参考2实际上自动完成JS？你可能在其他地方有它,但我只是想让你知道.

真正的问题可能是由'@ Url.Action'引起的.它只会执行该操作并返回结果.有*没有映射到文本框.

最佳实践只是进行简单的Ajax调用,并在收到响应时进行映射.

应该是这样的,只是写得快,所以不要拍我但你应该得到图片;)

$("#clientEntered").autocomplete({
            source: function(request,response)
            {
               $.ajax({
                 url: "/Clients/ClientAutoSuggest",
                 type:"POST",
                 dataType:"json",
                 data: { term: request.term },
                 success:function(data){
                    response($.map(data,function(item){
                      return { label: item.Name,value: item.Name, id: item.ClientId
                    }))
                 }

                })
            }
});