具有JQuery自動完成功能的ASP.NET文本框

Question

我正在使用帶有asp.net文本框的JQuery UI自動完成功能。 自動完成功能正常。 但是如何將返回的數據的選定ID分配給hiddenField？ 我的服務器端函數返回了包含的對象列表（這是一個示例）：

 public List<Employee> GetEmployeeList()
{
    List<Employee> empList = new List<Employee>();
    empList.Add(new Employee() { ID = 1, Email = "Mary@somemail.com" });
    empList.Add(new Employee() { ID = 2, Email = "John@somemail.com" });
    empList.Add(new Employee() { ID = 3, Email = "Amber@somemail.com" });
    empList.Add(new Employee() { ID = 4, Email = "Kathy@somemail.com" });
    empList.Add(new Employee() { ID = 5, Email = "Lena@somemail.com" });
    empList.Add(new Employee() { ID = 6, Email = "Susanne@somemail.com" });
    empList.Add(new Employee() { ID = 7, Email = "Johnjim@somemail.com" });
    empList.Add(new Employee() { ID = 8, Email = "Jonay@somemail.com" });
    empList.Add(new Employee() { ID = 9, Email = "Robert@somemail.com" });
    empList.Add(new Employee() { ID = 10, Email = "Krishna@somemail.com" });

    return empList;
}

這是ASPX代碼：

<form id="form1" runat="server">
<div class="demo">
    <div class="ui-widget">
        <label for="tbAuto">
            Enter Email:
        </label>
        <asp:TextBox ID="tbAuto" class="tb" runat="server">
        </asp:TextBox>
    </div>
</div>
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<asp:Label runat="server" ID="lbl" Text=""></asp:Label>
<asp:HiddenField runat="server" ID="hidid" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>

這是我的jQuery代碼：

<script type="text/javascript">

    $(function () {


        $(".tb").autocomplete({

       select: function( event, ui ) {
       // now assign the id of the selected element into your hidden field
       $("#<%= hidid.ClientID %>").val( ui.item.ID ); 
         },

            source: function (request, response) {
                $.ajax({
                    url: "Default.aspx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Email
                            }

                        }
                        )
                        )
                    }

                    ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                        alert(errorThrown);
                    }
                });
            },
            minLength: 1
        });
    });
</script>

這是我的WEb方法附帶代碼：

<WebMethod()> _
Public Shared Function FetchEmailList(ByVal mail As String) As List(Of Employee)
    Dim emp = New Employee()
    Dim fetchEmail = emp.GetEmployeeList()
    Return fetchEmail
End Function

Answer 1

您可以訂閱success事件並像這樣從ui.item.id獲取ID

select: function( event, ui ) {
    // now assign the id of the selected element into your hidden field
    $("#<%= hidid.ClientID %>").val( ui.item.id ); 
}

我以一種有點hidid的方式掌握了hidid字段（我不記得這樣做的首選方法是什么），所以這是一個需要改進的地方，但這應該為您指明了正確的方向。