ajaxControlToolkit AutoCompleteExtender的用法

首先，在使用AjaxControlToolkit中的AutoCompleteExtender之前，需要确保已经安装并引用了AjaxControlToolkit。可以通过NuGet Package Manager来安装：

Install-Package AjaxControlToolkit

安装完成后，在页面中引入AjaxControlToolkit：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

接下来，就可以在页面中添加AutoCompleteExtender控件了。以下是一个基本的例子：

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="aceSearch" runat="server"
    TargetControlID="txtSearch"
    MinimumPrefixLength="3"
    ServiceMethod="GetAutoCompleteData"
    ServicePath="~/AutoCompleteService.asmx">
</ajax:AutoCompleteExtender>

在上面的示例中，我们使用了aceSearch作为AutoCompleteExtender的ID，传入了txtSearch文本框的ID作为目标控件，设置了最小前缀长度为3（即需要输入至少3个字符才会触发自动完成方法），并指定了一个服务方法GetAutoCompleteData和服务路径AutoCompleteService.asmx。

我们需要在AutoCompleteService.asmx中创建GetAutoCompleteData方法，用于返回自动完成的数据。以下是一个例子：

[WebMethod]
public string[] GetAutoCompleteData(string prefixText, int count)
{
    List<string> data = new List<string>();
    // 根据前缀查询数据库，并将结果加入到data中
    return data.ToArray();
}

除了以上基本的用法之外，AutoCompleteExtender还包含一些可用的属性和事件，例如：

• CompletionInterval: 自动完成延迟时间，默认250ms。
• CompletionListCssClass: 自动完成列表的CSS类名。
• DelimiterChars: 分隔符。
• EnableCaching: 是否启用缓存。
• EnableQueryStringRewriting: 是否启用查询字符串重写（默认为true）。
• OnClientPopulating: 客户端populating事件。
• OnClientItemSelected: 客户端item selected事件。
• OnClientShowing: 客户端showing事件。

假设我们要使用另一个服务方法GetAutoCompleteData2，并将自动完成列表的宽度设置为文本输入框的宽度，可以这样做：

<asp:TextBox ID="txtSearch2" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="aceSearch2" runat="server"
    TargetControlID="txtSearch2"
    MinimumPrefixLength="3"
    ServiceMethod="GetAutoCompleteData2"
    ServicePath="~/AutoCompleteService.asmx"
    CompletionListCssClass="autocomplete"
    OnClientShowing="autoCompleteShowing">
</ajax:AutoCompleteExtender>
<script type="text/javascript">
    function autoCompleteShowing(sender, e) {
        var autocompleteDiv = e.get_completionList();
        autocompleteDiv.style.width = sender.get_element().clientWidth + "px";
    }
</script>

在上面的示例中，我们使用了autoCompleteShowing函数，将自动完成列表的宽度设置为文本输入框的宽度。同时，我们还为自动完成列表设置了一个CSS类名autocomplete。

除了在服务端返回数据之外，我们还可以在客户端使用JavaScript数组来指定自动完成的数据。以下是一个示例：

<asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="aceAutoComplete" runat="server"
    TargetControlID="txtAutoComplete"
    MinimumPrefixLength="0"
    EnableCaching="true">
</ajax:AutoCompleteExtender>
<script type="text/javascript">
    var autoCompleteData = ["JavaScript", "jQuery", "AngularJS", "React", "CSS", "HTML", "SQL", "C#"];
    aceAutoComplete.populateComplete = function (prefixText, completionList) {
        var matches = [];
        for (var i = 0; i < autoCompleteData.length; i++) {
            if (autoCompleteData[i].startsWith(prefixText)) {
                matches.push(autoCompleteData[i]);
            }
        }
        completionList.disposeItems();
        $common.foreach(matches, function (match) {
            completionList.addItem(match);
        });
        completionList.show();
    }
</script>

在上面的示例中，我们使用autoCompleteData数组来指定自动完成的数据，而非从服务端获取。我们在客户端使用populateComplete方法来指定如何填充自动完成列表的数据。先遍历数组，找到所有以输入的前缀开头的元素，然后将其加入到自动完成列表中显示出来。

以上就是AjaxControlToolkit中的AutoCompleteExtender的基本用法和一些高级用法，希望对您有所帮助！