Ajax中 AutoCompleteExtender 的使用方法

控件名：AutoCompleteExtender 

作用：   在文本框输入时，实现动态提示以及自动填写

示例：   在 google 进行搜索时，在文本框会输入提示内容，如图：

 

Ajax实现：

如果你在用Visual Studio 2005，还没有安装 ASPAJAXExtender 的话，请首先安装： 猛击这里下载

这里还要下载 AjaxControlToolkit ，可以下载这里的 dll 文件：猛击这里下载 

方法1：

将 AjaxControlToolkit（.dll） 里的所有控件添加到 vs2005 或 vs2008 的工具栏中：

添加到工具栏中的方法：

     右键工具栏选项卡：添加选项卡 ＞ 命名 ＞ 选项 ＞　浏览　＞　选择dll文件 > 确定

网页中添加如下代码：

<div>

<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server" AutoPostback="true">
   <ContentTemplate>
       <asp:TextBox ID="tb" runat="server" Text=""></asp:TextBox>
       <ajax:AutoCompleteExtender ID="googleSa" runat="server" ServicePath="AutoComplete.asmx"
          TargetControlID="tb" ServiceMethod="GetCompletionList">
       </ajax:AutoCompleteExtender>
   </ContentTemplate>
</asp:UpdatePanel>
</div>

 

属性介绍： 

１．TargetControlID：指定将被辅助完成自动输入的控件ID，这里的控件只能是TextBox；
２．ServicePath：指出提供服务的WEB服务路径，若不指出则ServiceMethod表示本页面对应的方法名；
３．ServiceMethod：指出提供服务的方法名；
４．MinimumPrefixLength：指出开始提供提示服务时，TextBox控件应有的最小字符数，默认为3；
５．CompletionSetCount：显示的条数，默认为10；
６．EnableCaching：是否在客户端缓存数据，默认为true；
７．CompletionInterval：从服务器读取数据的时间间隔，默认为1000，单位：毫秒。

注意：

1. webservice 需要声明为 [System.Web.Script.Service.ScriptService]

   这样 Ajax 可以前台调用。

2. 方法的三个条件：需要严格遵守！
   返回类型必需为：string []；参数类型必需为：string  ,   int；
　参数名：prefixText  ,  count。

 

WebService代码： 

[System.Web.Script.Services.ScriptService]

publicclassAutoComplete : System.Web.Services.WebService
{
[WebMethod]
publicstring[] GetCompletionList(stringprefixText,intcount)
{
   if( count == 0 )
      count=10;
   if( prefixText.Equals("xyx") )
      return new string[0];
   List<string> items = new List<string>(count);
   Random random1 = new Random();
   for(int i=0; i<count; i++)
   {
      charc1=(char)random1.Next(65,97);
      charc2=(char)random1.Next(97,122);
      charc3=(char)random1.Next(97,122);
      items.Add(prefixText+c1+c2+c3);
   }
   returnitems.ToArray();
}
}

prefixText ：是输入的内容，可以用来检索数据库，查询出以其开头的字符串。将查询出来的字符串以 string[] 形式返回即可。