AutoCompleteExtender详细介绍（二）

上篇文件介绍了AutoCompleteExtender控件的基本用法，此篇文件对AutoCompleteExtender进行更深入了介绍。

1. AutoCompleteExtender传递自定义参数

        AutoCompleteExtender控件搜索方法默认的传递参数是关联的textbox控件中输入的值，而有的时候输入的值无法准确的定位到匹配信息，这时就需要传递额外的参数，以帮助定位。

        上篇文章中说过，AutoCompleteExtender搜索函数有两种方式重载：

public string[] ServiceMethod (string prefixText, int count);
public string[] ServiceMethod (string prefixText, int count,string contextKey);

        第一种形式是不包含自定义参数的，第二中形式就是包含自定义参数的，所有的自定义参数都可以通过第二个方法的第三个参数进行传递。

        参数传递的动作发生在textbox控件输入后，所以要传递额外的参数需要处理textbox控件按键事件。

[csharp]   view plain copy

1. <span style="color:#4d4d4d;"><asp:TextBox ID="txtProduct" runat="server" Width="180px" Height="25px" </span><span style="color:#ff0000;">οnkeydοwn="return OnTxtProductKeyDown();</span><span style="color:#4d4d4d;">" ></asp:TextBox></span>  

         为textbox控件定义onkeydown处理函数，这是一个javascript函数，定义如下：

[javascript]   view plain copy

1. function OnTxtProductKeyDown()  
2.     {  
3.         var acNameClientId="<%=actProduct.ClientID %>";                // 获取autocompleteextender控件ID  
4.         var acName= $find(acNameClientId);                             // 查找autocompleteexteder控件  
5.         if(acName!=null)  
6.             acName.set_contextKey("<%=cidCurrent %>");                // 设置autocompleteextender控件的额外参数  
7.     }  

         可以看到，关键在acName.set_contextKey()这句，在每次textbox的onkeydown事件中调用这个方法，设置额外参数，从而给web服务方法传递额外参数。

2. 触发选择事件

        AutoCompleteExtender控件在选择某项后，会触发指定事件，从而完成某些个性化处理。为AutoCompleteExtender控件添加选择事件很简单。

[csharp]   view plain copy

1. <cc1:AutoCompleteExtender ID="actProduct" runat="server" ServicePath="SelectBaseInfo.asmx"  
2. TargetControlID="txtProduct" ServiceMethod="GetProductInfo" MinimumPrefixLength="1" CompletionInterval="100"   
3. CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"   
4. CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"   
5. OnClientItemSelected="OnAceProductItemSelected"            // 关联选择事件  
6. >  
7. </cc1:AutoCompleteExtender>  

         注意，关联的选择事件是一个javascript函数，可以在函数中进行自定义处理，如下样例：

[javascript]   view plain copy

1. function OnAceProductItemSelected(source, eventArgs)  
2.     {  
3.         var result = eventArgs.get_value();  
4.         var lblIDClientId = "<%=lblProductID.ClientID %>"  
5.         var lblID = document.getElementById(lblIDClientId);  
6.         if(lblID !=null)  
7.             lblID.value = result.split(',')[2];  
8.   
9.         var lblNameClientId = "<%=txtProduct.ClientID %>"  
10.         var lblName = document.getElementById(lblNameClientId);  
11.         if(lblName!=null)  
12.             lblName.value=result.split(',')[0];  
13.     }  

         其中eventArgs.get_value()用来获取选择的内容。上javascript函数的作用是，把返回的内容进行分割，将分割的值存储到不同的控件中。