带有 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 字段（我不记得首选的方法是什么），所以这是一个需要改进的领域，但这应该指出你正确方向。