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
                    }))
                 }

                })
            }
});

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

1 个答案: