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

Question

我已经为这个问题绞尽脑汁有一段时间了，我不确定我做错了什么。

我对我的一个控制器进行了一个非常简单的 JSON 调用，我想使用 jquery ui 自动完成功能返回客户端名称以及相关 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>

我尝试了不同的配置来解析响应，但我尝试的任何操作似乎都不起作用工作。任何建议或帮助都会很棒，谢谢！

编辑：由于下面凯文的回答，它得以正常工作。问题在于没有正确映射响应。下面的代码现在运行良好。

$("#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
                    }))
                 }

                })
            }
});