ASP.NET C# AJAX Autocomplete在TabContainer中失效问题咨询

功能失效是三个问题叠加导致的：

• TabContainer属于ASP.NET AJAX动态渲染控件，非激活标签页内的DOM不会在页面初始加载时挂载，document.ready执行时找不到对应文本框，绑定自然不生效
• ASP.NET服务器控件放在TabContainer这类命名容器内时，渲染后的客户端ID不是你写死的TextBox1，会拼接父容器前缀，直接用#TextBox1选择器匹配不到元素
• 你同时引入了jQuery Autocomplete和AjaxControlToolkit自带的AutoCompleteExtender，两个插件会争抢文本框的事件控制权，本身就存在冲突；且Tab切换、局部回发后DOM会被重绘，初始的事件绑定会直接丢失。

按以下步骤调整即可：

1. 删除冗余的ajaxToolkit:AutoCompleteExtender控件代码，既然已经用jQuery Autocomplete走一般处理程序加载提示数据，不需要保留Toolkit的自动完成扩展，避免事件冲突。
2. 调整文本框配置，非必要不要开AutoPostBack，否则输入过程中触发回发会直接打断提示弹窗：

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

3. 替换原有jQuery绑定代码，适配ASP.NET AJAX局部回发、Tab切换后的DOM重绘场景，同时用控件的ClientID属性获取真实渲染后的客户端ID，不要写死ID选择器：

   // 页面首次初始加载时绑定
   j(function () {
       bindTextBoxAutoComplete();
   });
   
   // 监听ASP.NET AJAX局部回发、Tab切换完成事件，回发完成后重新绑定
   if (typeof(Sys) !== 'undefined') {
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
           bindTextBoxAutoComplete();
       });
   }
   
   function bindTextBoxAutoComplete() {
       const textBox = j('#<%= TextBox1.ClientID %>');
       // 先销毁已存在的自动完成实例，避免重复绑定冲突
       if (textBox.hasClass('ui-autocomplete-input')) {
           textBox.autocomplete('destroy');
       }
       textBox.autocomplete({
           source: 'ItemNewNameHandler.ashx',
           minLength: 0, // 设为0对应你之前MinimumPrefixLength="-1"的效果：聚焦无输入也弹出提示
           focus: function () {
               j(this).autocomplete("search", j(this).val());
           }
       });
   }
   

4. 如果你确实需要文本框失焦自动回发，保留AutoPostBack="True"配置即可，上面的endRequest监听会在回发完成后自动重新绑定自动完成逻辑，不会出现绑定丢失的问题。

内容的提问来源于stack exchange，提问作者Marceline