如何显示带 AJAX-自动完成的加载图像

经过很长一段时间，我终于有机会更新我的博客了。

在这篇文章中，我将向您展示如何使用 AJAX 自动完成扩展器显示数据获取进度。

这非常简单。

1. 在页面上添加 ASP 文本框 (ID=TextBox1)
2. 添加 AJAX AutoCompleteExtender
3. 将以下 JavaScript 代码插入到网页中

       function ShowImage() {
           document.getElementById('TextBox1')
                .style.backgroundImage = 'url(images/loader.gif)';
    
           document.getElementById('TextBox1')
                              .style.backgroundRepeat = 'no-repeat';
    
           document.getElementById('TextBox1')
                              .style.backgroundPosition = 'right';
       }
       function HideImage() {
           document.getElementById('TextBox1')
                                .style.backgroundImage = 'none';
       }

4. 设置 AutoCompleteExtender 的 OnClientPopulating=ShowImage 和 OnClientPopulated=HideImage 事件。完整的标记如下所示

   <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"  
       DelimiterCharacters="" Enabled="True" ServicePath="WebService1.asmx" TargetControlID="TextBox1"
       ServiceMethod="GetCompletionList" MinimumPrefixLength="2"
       OnClientPopulating="ShowImage" OnClientPopulated="HideImage"  />