title: ASP.NET TextBox With JQuery AutoComplete
body: <p>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) : </p>
  
  <pre><code> public List&lt;Employee&gt; GetEmployeeList()
  {
      List&lt;Employee&gt; empList = new List&lt;Employee&gt;();
      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;
  }
  </code></pre>
  
  <p>and this is ASPX Code :</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
  &lt;div class="demo"&gt;
      &lt;div class="ui-widget"&gt;
          &lt;label for="tbAuto"&gt;
              Enter Email:
          &lt;/label&gt;
          &lt;asp:TextBox ID="tbAuto" class="tb" runat="server"&gt;
          &lt;/asp:TextBox&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;asp:TextBox ID="TextBox1" runat="server"&gt;
  &lt;/asp:TextBox&gt;
  &lt;asp:Label runat="server" ID="lbl" Text=""&gt;&lt;/asp:Label&gt;
  &lt;asp:HiddenField runat="server" ID="hidid" /&gt;
  &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>here is my jquery Code :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(function () {
  
  
          $(".tb").autocomplete({
  
         select: function( event, ui ) {
         // now assign the id of the selected element into your hidden field
         $("#&lt;%= hidid.ClientID %&gt;").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
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is My WEb Method Side Code :</p>
  
  <pre><code>&lt;WebMethod()&gt; _
  Public Shared Function FetchEmailList(ByVal mail As String) As List(Of Employee)
      Dim emp = New Employee()
      Dim fetchEmail = emp.GetEmployeeList()
      Return fetchEmail
  End Function
  </code></pre>