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

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