Question

我一直在玩JQuery自动完成功能。按照http://www.asp.net/ajaxlibrary/jquery_mvc_autocomplete.ashx

上的示例

自动填充组件显示2个空白元素（尽管如果我选择一个选项，则用于存储所选标题ID的隐藏字段正在填充）。

我怀疑我没有正确地映射回复，并且这是非常明显的我想念的东西，但是，不能为我的生活发现它。

控制器方法。

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>

Answer 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 );
        });
    },
    // ...        
});

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

1 个答案: