我有一个传统的 ASP.NET GridView。在其中我有一个具有编辑功能的模板字段。我需要在编辑件上使用 jQuery 自动完成插件。它可以在除此 GridView 内部之外的任何地方工作。换句话说，我知道该插件有效。
这是 ASP.NET 的东西（是的，我使用的是 SqlDataSource）：
这里是 document.ready() 中的 jQuery：
$('[id$=txtEditIngredients]').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
我在这里可能做错了什么？
【问题讨论】：
<%= txtEditIngredients.ClientID %>
我认为最好的方法是为文本框指定一个类并根据类而不是 ID 来处理它。
$('.AutoCompleteField').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
当我尝试使用 ID 访问 gridview 中的控件时遇到问题。
HTH
【讨论】：
您将希望在项目模板中使用：
<%# ((GridViewRow)Container).FindControl("txtEditIngredients").ClientID %>
如果您查看渲染页面的源代码，您将看到 gridview 中文本框的控件 ID 不只是 txtEditIngredients，它具有预先附加的信息。
另一种选择是向文本框添加一个类并根据该类应用自动完成功能。这样他们就不会依赖 id
$('.ICLookup').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
此外，如果使用客户端 ID，请确保将特定 document.ready(): 放入 EditTemplate 以确保仅在编辑控件可见时才调用它。
【讨论】：
好吧，既然您说它在更新面板中，那就更有意义了。更新面板中的代码不一定会在您的 jquery 运行时呈现。像我在其他答案中建议的那样使用 .size 发出警报将确认这一点。
如果您执行了 .live('autocomplete') 调用而不是 .autocomplete()，那么即使使用更新面板，它也应该可以工作。 jQuery .live 函数会导致将 jQuery 事件添加到与选择器匹配的所有控件，即使它们是在您进行调用之后添加的。详情请见http://api.jquery.com/live/。
【讨论】：
您可以根据需要使用类来进行选择（正如其他人提到的那样），但对我来说，如果您只是为了这个目的而添加一个类并且您有一个 ID，那么您可以select with，好像有点浪费。
我创建了一个非常简单的示例，它显示了您的操作方式（使用 [id$=txtField] 作为您的选择器确实可以与插件一起使用。这是 .aspx 代码：
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.min.js"></script>
<link type="text/css" href="jquery.autocomplete.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('[id$=txtTest]').autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
mustMatch: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTest" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
这是运行测试所需的代码隐藏更新：
protected void Page_Load(object sender, EventArgs e)
{
List<string> data = new List<string>();
data.Add("test");
data.Add("test2");
this.grdView.DataSource = data;
this.grdView.DataBind();
}
如果您创建一个测试 webapp 并以此作为测试页面并运行它，自动完成功能将正常工作。
由于这不适用于您的应用，您需要检查以确保您使用的选择器 ([id$=txtEditIngredients]) 确实匹配某些内容。要对此进行测试，请将此代码放在您的 document.ready 事件之前的位置：
alert($('[id$=txtEditIngredients]').size());
这应该会提醒一个数字，其中包含 GridView 中的行数。如果不是，请查看源代码并在您的某一行中找到该文本字段以查看 ID 是什么，并相应地调整您的选择器。
编辑：我只是想补充一点，由于 .Net 控件命名结构，我一直在 jQuery/.Net 中使用 [id$=controlName]，并且每次都能正常工作，所以这根本不应该是一个问题。
【讨论】：