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，谢谢！

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