Ajax学习笔记（一）：AutoCompleteExtender控件

AutoCompleteExtender：字面上翻译就是自动完成扩展控件

既然是扩展控件，就要依托于其他的控件。

AutoCompleteExtender的属性：

TargetControlID：The TextBox control where the user types content to be automatically completed

目标Textbox控件的ID，因为是扩展控件，所以要与textbox控件相关联

ServiceMethod： The web service method to be called.

　　　　　　　调用WebService中的方法名称。（AutoCompleteExtender控件是通过webservice技术实现其功能的，webservice技术现在我了解的不是很深入，希望朋友们可以帮我介绍一　　　　　　　　　　　　　　下这方面的资料）

ServicePath ： The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page 　　　　　　　　　　　　　　method

　　　　　　　　调用Webservice的路径。

ContextKey ： User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath.

　　　　　　　提供了另一种参数

MinimumPrefixLength：指出开始提供提示服务时，TextBox控件应有的最小字符数，默认为3；

CompletionSetCount：显示的条数，默认为10；

EnableCaching：是否在客户端缓存数据，默认为true；

CompletionInterval：从服务器读取数据的时间间隔，默认为1000，单位：毫秒。

红色标记的属性为常用的属性，黑色的大家可以下去慢慢的研究。

OK下面开始学习了呵呵

1.在数据库中建一个表，结构如下：

StarPortCn:港口的中文名称

StarPortEN：港口的英文名称

PortCNEN：港口的中文英文名称（搜索的时候就采用该字段s）

2.建一个ASPX的页面代码如下：

2.1首先将一个textbox控件放入页面中 id=“Textbox1” 设置其他相应的属性

2.2 将scriptmanage控件放入页面中

2.3将AutoCompleteExtender 控件放入页面中，设置相应属性如下：

        TargetControlID="TextBox1" //相连目标控件的ID
         MinimumPrefixLength="1" //
         ServicePath="WebService.asmx" //WebService的路径
         ServiceMethod="GetProductName"   //WebServic中方法的名称
         CompletionSetCount="2"
         CompletionInterval="100"
         OnClientItemSelected="OnACEItemSelected"
         CompletionListItemCssClass=""
            CompletionListCssClass=""
             CompletionListHighlightedItemCssClass=""
          ShowOnlyCurrentWordInCompletionListItem="False" ViewStateMode="Inherit">

下面是相应的代码：

 1     <form id="form1" runat="server">
 2     <asp:ScriptManager ID="ScriptManager1" runat="server">
 3     </asp:ScriptManager>
 4     <div>
 5         <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
 6         <asp:AutoCompleteExtender ID="AutoCompleteExtender1" 
 7         runat="server"
 8          TargetControlID="TextBox1" 
 9          MinimumPrefixLength="1"  
10          ServicePath="WebService.asmx"
11          ServiceMethod="GetProductName" 
12          CompletionSetCount="2" 
13          CompletionInterval="100" 
14          OnClientItemSelected="OnACEItemSelected"
15          CompletionListItemCssClass=""
16             CompletionListCssClass=""
17              CompletionListHighlightedItemCssClass=""
18           ShowOnlyCurrentWordInCompletionListItem="False" ViewStateMode="Inherit">
19         </asp:AutoCompleteExtender>
20     </div>
21     </form>

OK，这个页面的东西们基本上完工了，下一路就是Webservice页面的东西了

3.在解决方案中建一个WebService.asmx文件

代码如下：

 1  public string[] GetProductName(string prefixText, int count)
 2         {
 3             List<string> suggestions = new List<string>();//声明一泛型集合
 4             SqlConnection con = new SqlConnection("database=Port;Integrated Security=False;user id=zhang;password=1230.;server=.");
 5             con.Open();
 6   
 7             SqlCommand com = new SqlCommand("select   StaPortCN  from Port where PoetCNEN like @PoetCNEN ", con);
 8             com.Parameters.Add("@PoetCNEN", SqlDbType.NVarChar).Value = "%" + prefixText + "%";
 9             SqlDataReader sdr = com.ExecuteReader();
10             while (sdr.Read())
11             {
12                 suggestions.Add(sdr.GetString(0)); //将结果保存在数组中
13 
14             }
15             sdr.Close();
16             con.Close();
17             return suggestions.ToArray(); 
18      
19 
20             
21 
22             
23 
24         }

OK！现在已完成了：下面看一下运行结果吧：

欢迎转载：转载请注明出处：http://www.cnblogs.com/qingxing，谢谢！

希望能与大家多交流交流。

posted @ 2011-07-08 16:39 ~青荇~ 阅读(488) 评论(0) 收藏举报

刷新页面返回顶部

~青荇~

Ajax学习笔记（一）：AutoCompleteExtender控件

公告