title: jquery autocomplete for multiple textboxes inside asp.net Gridview
body: <p>I have asp.net <code>Gridview</code> that have at least 15 rows with textbox by default example</p>
  
  <p><img src="https://i.stack.imgur.com/KfPUZ.jpg" alt="enter image description here"></p>
  
  <p><strong>aspx</strong></p>
  
  <pre><code>&lt;asp:GridView ID="gv_Others" runat="server" AutoGenerateColumns="false" CssClass="gvothers"&gt;
                      &lt;Columns&gt;
                      &lt;asp:TemplateField &gt;                        
                          &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                          &lt;ItemTemplate &gt;                     
                              &lt;asp:TextBox ID="txtEmp" runat="server" Width=100% Height=22px CssClass="txtE"&gt;&lt;/asp:TextBox&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;/Columns&gt;
                  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>aspx.cs (here how I am generating 15 rows of a <code>GridView</code>)</p>
  
  <pre><code>private void SetInitialRowsofOthers()
      {
          var list = new List&lt;string&gt;();
  
          for (int i = 0; i &lt; 16; i++)
          {
              list.Add(string.Empty);
          }
          gv_Others.DataSource = list;
          gv_Others.DataBind();
          gv_Others.HeaderRow.Visible = false;
  
       }
  </code></pre>
  
  <p><strong>WevService.axms</strong> </p>
  
  <pre><code>[WebMethod]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public List&lt;string&gt; GetotherServices(string txt1)
      {
          // your code to query the database goes here
          List&lt;string&gt; result = new List&lt;string&gt;();
          string QueryString = System.Configuration.ConfigurationManager.ConnectionStrings["autoDBConn"].ToString();
  
          using (SqlConnection obj_SqlConnection = new SqlConnection(QueryString))
          {
              using (SqlCommand obj_Sqlcommand = new SqlCommand("Select DISTINCT OtherService as txt1 from easy_tblOtherServiceMaster where OtherService like @SearchText + '%' ", obj_SqlConnection))
              {
                  obj_SqlConnection.Open();
                  obj_Sqlcommand.Parameters.AddWithValue("@SearchText", txt1);
                  SqlDataReader obj_result1 = obj_Sqlcommand.ExecuteReader();
                  while (obj_result1.Read())
                  {
                      result.Add(obj_result1["txt1"].ToString().TrimEnd());
                  }
              }
          }
  
          return result;
      }
  </code></pre>
  
  <p>I want to fill each textbox by jQuery <code>autocomplete</code>.. for this I created a webservice and getting a value from jQuery.</p>
  
  <p>How I am trying to achieve this task:</p>
  
  <pre><code>&lt;script src="js/jquery-1.8.1.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function() {
                      SearchText();
                      function SearchText() {
                          var $arrT = $('#&lt;%=gv_Others.ClientID %&gt;').find('input:text[id$="txtEmp"]');
                          $($arrT).autocomplete({
                              source: function(request, response) {
                                  $.ajax({
                                  url: "WebService.asmx/GetotherServices",
                                      type: "POST",
                                      dataType: "json",
                                      contentType: "application/json; charset=utf-8",
                                      data: "{ 'txt1' : '" + $($arrT).val() + "'}",
                                      dataFilter: function(data) { return data; },
                                      success: function(data) {
                                          response($.map(data.d, function(item) {
                                              return {
                                                  label: item,
                                                  value: item
                                              }
                                          }))
                                          //debugger;
                                      },
                                      error: function(result) {
                                          alert("Error");
                                      }
                                  });
                              },
                              minLength: 1,
                              delay: 1000
                          });
                      }
                  });
          &lt;/script&gt;
  
            &lt;script type="text/javascript"&gt;
                $(document).ready(function() {
  
                    SearchText();
  
                    function SearchText() {
                        $("#&lt;%=Txt_RegNo.ClientID %&gt;").autocomplete({
                            source: function(request, response) {
                                $.ajax({
                                url: "WebService.asmx/GetAutoCompleteData",
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    data: "{ 'txt' : '" + $("#&lt;%=Txt_RegNo.ClientID %&gt;").val() + "'}",
                                    dataFilter: function(data) { return data; },
                                    success: function(data) {
                                        response($.map(data.d, function(item) {
                                            return {
                                                label: item,
                                                value: item
                                            }
                                        }))
                                        //debugger;
                                    },
                                    error: function(result) {
                                        alert("Error");
                                    }
                                });
                            },
                            minLength: 1,
                            delay: 1000
                        });
                    }
                });
          &lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
                  $(function() {  
                      $('input:text:first').focus();
                      var $inp = $('input:text');
                      $inp.bind('keydown', function(e) {
                          //var key = (e.keyCode ? e.keyCode : e.charCode);
                          var key = e.which;
                          if (key == 13) {
                              e.preventDefault();
                              var nxtIdx = $inp.index(this) + 1;
                              $(":input:text:eq(" + nxtIdx + ")").focus();
                          }
                      });
                  });
                  &lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                  function Load_OtherService() {
                      var hv = $('input[id$=hdnOthers]');
                      var $arrT = $('#&lt;%=gv_Others.ClientID %&gt;').find('input:text[id$="txtEmp"]');  
                      var hv1 = "" + hv.val();
                      var va = hv1.split(',');
                      for (var j = 0; j &lt; va.length; j++) {
                          var $txt = $arrT[j];
                          $($txt).val(va[j]);
                      }                          
                  }
              &lt;/script&gt; 
  </code></pre>
  
  <p>Now for example when I type "Engine Work" in TEXTBOX 1 and select the value which populated by jQuery <code>autocomplete</code>("Engine Work") then second time when I type in other text box (TEXT BOX 2). It's only give me the "Engine Work" option to select.. which means after selecting any value (populated by jQuery <code>autocomplete</code>) I can't select any other value in other text boxes....
  Example:- (See Image Below) </p>
  
  <p><img src="https://i.stack.imgur.com/iFooa.jpg" alt="enter image description here"></p>
  
  <p>as you see i type Genral Work but still it`s populating the Previous value "Engine Work" in jquery AutoComplete which i dont want</p>
  
  <p>How to find the TextBox by CSS Class using jQuery????</p>
  
  <p>Something like this (its only find TextBox id by using jQuery inside <code>GridView</code> but I need to find textbox by Css Class)</p>
  
  <pre><code>var $arrT = $('#&lt;%=gv_Others.ClientID %&gt;').find('input:text[id$="txtEmp"]');
  </code></pre>