GridView索引使用asp.net和jQuery

本文关键字：net jQuery asp 索引 GridView | 更新日期: 2023-09-27 18:03:59

我有一个GridView的文本框与自动完成在每个GridViewRow的行。我已经实现了它，它正在工作，但我只能让它与GridView的第一行工作。我的问题是如何遍历GridView的所有行并实现自动完成功能。正如您现在看到的，我刚刚将行索引设置为0。

下面是查询:

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

GridView索引使用asp.net和jQuery

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

把你的文本框定义改成:

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

并将jQuery选择器更改为:

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

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

我认为最好的方法是为文本框指定一个class，并根据class而不是ID来处理它。

文本框控件: 

<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
        });
相关文章：