将 JSON AJax 响应映射到 JQuery 自动完成答案

【问题标题】：Mapping JSON AJax response to JQuery auto complete将 JSON AJax 响应映射到 JQuery 自动完成
【发布时间】：2014-02-09 16:40:55
【问题描述】：

我一直在玩 JQuery 自动完成。按照http://www.asp.net/ajaxlibrary/jquery_mvc_autocomplete.ashx上的例子

自动完成组件显示 2 个空白整体（尽管如果我选择一个选项，我用来存储所选 titleID 的隐藏字段将被填充）。

我怀疑我没有正确映射响应，而且我确实很明显地错过了一些东西，但是我终生无法发现它。

控制器方法。

public ActionResult SearchTitle(string term)
    {
        var results = new List<Models.Title>{ new Models.Title{ Name = "TestResponse1",TitleId=123 }, new Models.Title { Name = "TestResponse2", TitleId=234} };
        return Json(results.ToArray(),JsonRequestBehavior.AllowGet);
    }

查看

@using (Html.BeginForm())
{
    <h3>Add a new subscription</h3>
        @Html.TextBox("Name")
        @Html.Hidden("TitleId")
        <input type="submit" value="Find Title" />

}


@Styles.Render("~/Content/themes/base/css")

<script type="text/javascript">
    $("#Name").autocomplete({
        source: '@Url.Action("SearchTitle")',
        dataType: "json",
        messages: { noResults: 'No titles found' },
        select: function (event, ui) {
            $("#TitleId").val(ui.item.TitleId);
        }

    });

</script>

谁能发现我做错了什么？

好的，按照该建议，自动完成现在显示值，但是当我从下拉列表中选择一个项目时没有任何反应。谁能发现我错过了什么？

<script type="text/javascript">
    $("#Name").autocomplete({
        source: '@Url.Action("SearchTitle")',
        dataType: "json",
        messages: { noResults: 'No titles found' },
        focus:function(event,ui){
            $("#Name").val(ui.item.Name);
            return false;
        },
        select: function (event, ui) {
            $("#Name").val(ui.item.Name)
            $("#TitleId").val(ui.item.TitleId);
            return false;
        }
    })
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
          .append(item.Name)
          .appendTo(ul)
    };

</script>

【问题讨论】：

您是否在发送之前尝试注销Json(results.ToArray(),JsonRequestBehavior.AllowGet);？在点击客户端代码之前确保响应是干净的？
是的，响应是干净的。我在返回行上放了一个断点，还查看了 Chromes 开发者工具中的响应。

标签： c# jquery asp.net-mvc jquery-ui

【解决方案1】：

SearchTitle 返回的数据不是一个简单的字符串列表——它是一种自定义格式，jQuery UI 自动完成不知道应该在下拉列表中显示什么值。您应该看一下自定义数据示例：

http://jqueryui.com/autocomplete/#custom-data

jQuery UI 自动完成将寻找label 属性来确定应该向用户显示的内容，以及value 属性（可以是对象，不一定是纯字符串）作为基础数据。您需要在服务器上（在SearchTitle 或新的操作方法中）或在客户端（通过将函数指定为执行此操作的source 属性）将自定义数据转换为这种格式转型）。这是一个如何在客户端上执行此操作的示例（警告 - 未测试）：

$("#Name").autocomplete({
    source: function( request, response ) {
        $.getJSON( '@Url.Action("SearchTitle")', { term: request.term }, function( data, status, xhr ) {
            var titles = $.map( data, function (title) {
                return {
                    label: title.Name,
                    value: title.TitleId
                };
            });
            response( titles );
        });
    },
    // ...        
});

【讨论】：

啊，这很有道理！