c# - 如何使用 Javascript 在 GridView 中查找文本框

Question

我正在尝试使用 javascript 获取访问权限并在 GridView 中查找文本框，但出现错误:“名称 txt_UID”在当前上下文中不存在”。当我的文本框在 GridView 之外时，一切正常。这是我在 gridview 中的文本框，我的 gridview 称为 GridView1:

 <asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
    <ItemTemplate>  
     <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
        CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
       </ItemTemplate>
         <ItemStyle Width="150px" />
         </asp:TemplateField>

这是我的 JavaScript:

  <script type ="text/javascript">
        function setAutoComplete() {
            var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
            for (var i = 0; i < textBoxes.length; i++) {
                addAutoComplete(textBoxes[i].id);
            }
        }
</script>

<script type="text/javascript">
    function addAutoComplete(textBoxId) {
        $("#" + textBoxId).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hfUserId.ClientID %>").val(i.item.val);
            },
            minLength: 1
        });
    }; 

<script type ="text/javascript">
     $(document).ready(function () { setAutoComplete(); });
    </script>

Answer 1

问题是您的 GridView 在每一行上创建了一个 TextBox。 GridView 之外没有“txt_UID”控件。这就是您的错误消息告诉您的内容。

您的 JavaScript 函数旨在与一个 TextBox 一起使用。我想您希望自动完成功能适用于 GridView 中的所有 TextBox 控件。

我的建议是更改 JavaScript 函数以获取带有 TextBox ID 的参数，然后将 CSS 类 添加到每个 TextBox，最后制作一个包装器 JavaScript 函数，它将使用 getElementsByClassName 枚举 TextBox 控件，并调用该包装器函数DOM 就绪。

这是它的样子:

将 CSS 类添加到文本框:

<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Name">
    <ItemTemplate>  
        <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
            CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
    </ItemTemplate>
    <ItemStyle Width="150px" />
</asp:TemplateField>

新的 JavaScript 函数:

function setAutoComplete()
{
    var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
    for (var i = 0; i < textBoxes.length; i++)
    {
        addAutoComplete(textBoxes[i].id);
    }
}

接下来，将您的其他 JavaScript 变成一个带有参数(id)的函数:

function addAutoComplete(textBoxId) {
    $("#" + textBoxId).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfUserId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
};

最后，您准备好的代码更改为仅调用您创建的包装函数:

$(document).ready(function () { setAutoComplete(); });

奖励:这是一种仅使用 jQuery 的方法:

(只需要文本框上的 CSS 类)

$(document).ready(function () {
    $.each($(".AutoCompleteTextBox"), function (i, textBox) {
        textBox.autocomplete( /* your code */);
    })
});