將JSON AJax響應映射到JQuery自動完成

Question

我一直在玩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>  

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