AutoCompleteExtender详细介绍（二）

zlwzlwzlw

于 2013-11-18 11:18:50 发布

阅读量3.9k

点赞数

分类专栏： .Net

本文链接：https://blog.csdn.net/zlwzlwzlw/article/details/16801835

版权

.Net 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

上篇文件介绍了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控件按键事件。

<asp:TextBox ID="txtProduct" runat="server" Width="180px" Height="25px" οnkeydοwn="return OnTxtProductKeyDown();" ></asp:TextBox>

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

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

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

2. 触发选择事件

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

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

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

function OnAceProductItemSelected(source, eventArgs)
    {
        var result = eventArgs.get_value();
        var lblIDClientId = "<%=lblProductID.ClientID %>"
        var lblID = document.getElementById(lblIDClientId);
        if(lblID !=null)
            lblID.value = result.split(',')[2];

        var lblNameClientId = "<%=txtProduct.ClientID %>"
        var lblName = document.getElementById(lblNameClientId);
        if(lblName!=null)
            lblName.value=result.split(',')[0];
    }

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