ASP.NET TextBox With JQuery AutoComplete

i am using JQuery UI Autocomplete with asp.net textbox. AutoComplete works right. but how can i assign selected ID of returned Data to an hiddenField? My server Side Function returned list of objects that contains (this is an example) :

 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;
}

and this is ASPX Code :

<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>

here is my jquery Code :

<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/F开发者_运维技巧etchEmailList",
                    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>

And this is My WEb Method Side Code :

<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

You could subscribe to the success event and grab the ID from ui.item.id like so

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

I got a hold of the hidid field in a bit of a hackish way (I can't remember what the preferred way to do it is) so that's an area of improvement, but this should point you in the right direction.