使用asp.net和jQuery的GridView索引

Question

我在每個GridViewRow的行中都有一個帶有帶有autoComplete的TextBox的GridView。我已經實現了它，它正在工作，但我只能讓它與GridView的第一行一起工作。我的問題是如何遍歷GridView的所有行並實現autoComplete函數。正如你現在所看到的，我只是將行索引設置爲零。

下面是該查詢：

<script type="text/javascript"> 
      $(function() { 
       $('#<%= (GridViewMealData.Rows[0].FindControl("TextBoxFood")).ClientID %>').autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "SearchFoodService.asmx/GetFoodNames", 
         data: "{ 'FoodName': '" + request.term + "' }", 
         type: "POST", 
         dataType: "json", 
         contentType: "application/json;charset=utf-8", 
         success: function (result) { 
          response(result.d); 
         }, 
         error: function (result) { 
          alert('There is a problem processing your request'); 
         } 
        }); 
       }, 
       minLength: 0 
      }); 
     }); 
    </script> 

這裏是TextBox控件：

<asp:TextBox ID="TextBoxFood" runat="server"></asp:TextBox> 

Answer 1

您不必使用客戶端ID告訴它哪些字段應該具有自動填充功能。只需使用班級和class selector。

您的文本框定義改成這樣：

<asp:TextBox ID="TextBoxFood" runat="server" CssClass="food-autocomplete"></asp:TextBox> 

而且你的jQuery選擇改成這樣：

$('.food-autocomplete').autocomplete({ //rest of initialization etc 

在它前面的點是在jQuery選擇代碼，用來告訴它找到所有具有food-autocomplete類的元素，然後它將在所有元素上執行自動完成初始值設定項。

Answer 2

我認爲最好的方法是爲文本框指定一個類，並根據類而不是ID來處理它。

TextBox控件：

<asp:TextBox id="TextBoxFood" runat="server" CssClass="AutoCompleteField" /> 

jQuery的：

 $('.AutoCompleteField').autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "SearchFoodService.asmx/GetFoodNames", 
        data: "{ 'FoodName': '" + request.term + "' }", 
        type: "POST", 
        dataType: "json", 
        contentType: "application/json;charset=utf-8", 
        success: function (result) { 
         response(result.d); 
        }, 
        error: function (result) { 
         alert('There is a problem processing your request'); 
        } 
       }); 
      }, 
      minLength: 0 
     });