ASP.NET 文字方塊自動完成功能實作（仿 Google、百度風格）

專案概覽

本範例示範如何結合 AjaxControlToolkit 與 AutoCompleteExtra 元件，打造支援中文拼音/首字母搜尋的文字方塊自動完成功能，類似 Google 或百度搜尋框的體驗。

資料庫準備

使用 SQL Server 2008 建立測試資料表 Ceshi，並填入範例資料：

CREATE TABLE Ceshi (
    id VARCHAR(50) PRIMARY KEY NOT NULL,
    cname VARCHAR(30)
);
INSERT INTO Ceshi SELECT NEWID(),'jack1' UNION ...

中文轉拼音函式

資料庫層建立標量函式 f_GetPy，將中文字轉為大寫拼音首字母，支援模糊比對：

CREATE FUNCTION [dbo].[f_GetPy](@str NVARCHAR(4000))
RETURNS NVARCHAR(4000)
AS BEGIN
    -- 內部使用對照表將漢字映射為 A-Z
    -- 迴圈逐字轉換並回傳組合字串
END

前端頁面

引用必要組件並配置 AutoCompleteExtraExtender：

<%@ Register Assembly="AutoCompleteExtra" Namespace="AutoCompleteExtra" TagPrefix="cc1" %>
<asp:TextBox ID="txtCompanyName" CssClass="searchTextBox" Style="width: 280px;" runat="server" />
<cc1:AutoCompleteExtraExtender ID="AutoCompleteExtraExtender1" runat="server"
    ServiceMethod="GetCompanyNameList"
    TargetControlID="txtCompanyName"
    MinimumPrefixLength="1"
    CompletionInterval="10"
    UseContextKey="True" />

後端 WebMethod

靜態方法 GetCompanyNameList 接收前綴字串，呼叫管理類別查詢並回傳 string[][] 格式資料（顯示文字、實際值）：

[WebMethod, ScriptMethod]
public static string[][] GetCompanyNameList(string prefixText, int count, string contextKey)
{
    var list = new List<string[]>();
    var nameList = new List<string>();
    var idList = new List<string>();
    new CeshiManage().GetTopUserName(count, prefixText.ToUpper(), out idList, out nameList);
    for (int i = 0; i < nameList.Count; i++)
        list.Add(new[] { nameList[i], idList[i] });
    return list.ToArray();
}

資料存取邏輯

CeshiManage.GetTopUserName 使用 SubSonic ORM 執行參數化 SQL，結合 ROW_NUMBER() 分頁與 f_GetPy 函式實現「姓名或拼音」雙模糊搜尋：

string sql = $@"SELECT id, cname FROM (
    SELECT ROW_NUMBER() OVER(ORDER BY cname) AS ROWNUM, id, cname
    FROM [dbo].[Ceshi]
    WHERE cname LIKE '%{name}%' OR dbo.f_GetPy(cname) LIKE '%{name}%'
) AS ta WHERE ta.ROWNUM <= {topCount}";

Web.config 關鍵設定

• 連線字串指向 DemoTo 資料庫
• SubSonic 設定 defaultProvider="DemoTo" 並指定生成命名空間 Oceansoft.Net
• targetFramework="4.0" 確保 .NET 4.0 相容

部署注意事項

1. 專案需參考 AjaxControlToolkit.dll、AutoCompleteExtra.dll、SubSonic.dll
2. 資料庫需先執行建表與函式腳本
3. 確認 IIS 應用程式集區為 .NET 4.0 整合模式