javascript - 使用 asp.net 和 jQuery 的 GridView 索引

Question

我有一个 GridView，其中的 TextBox 在 GridViewRow 的每一行中都具有自动完成功能。我已经实现了它并且它正在工作，但我只能让它与 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>

这是文本框控件:

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

Answer 1

您不必使用客户端 ID 来告诉它哪些字段应该具有自动完成功能。只需使用一个类和 class selector .

将您的 TextBox 定义更改为:

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

并将 jQuery 选择器更改为:

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

它前面的点在 jQuery 选择器代码中用于告诉它查找所有具有 food-autocomplete 类的元素，然后它将对所有元素执行自动完成初始值设定项。