程式碼下載頁面：http://download.csdn.net/detail/zhanghui_hn/6994105

說明：資料庫連線字串在web.config檔案中，為方便執行使用的是官方的Northwind資料庫。

參考(向其作者致敬)：

²  http://www.loveweb8.com/plus/demo.php?aid=57這個例子是html原始碼。利用jquery.autocomplete外掛利用js實現了自動補全功能。由於我的需要是結合sqlserver資料庫表實現自動補全功能。就下來就是將資料庫錶轉為js陣列，自然而然就想到了ajax。

²  Asp.NetAjax的兩種基本開發模式這篇文章中的第二部分就是說：js呼叫webservice的示例。

程式碼解析。

1.        新增webservice檔案。

新增新項--“啟用了AJAX的WCF服務” 將新檔案命名為DBService.svc.

2.        在DBService.svc中新增函式，函式返回值就是 提示自動補全的資料。

[OperationContract]
public string getSortList()
{
    List<string> sorts = new List<string>();
    using (SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["zhui.pc"].ConnectionString))
    {
        cn.Open();
        SqlCommand cmd = new SqlCommand("select [LastName] from [dbo].[Employees]", cn);
        DataTable dt = new DataTable();
        using (SqlDataAdapter da = new SqlDataAdapter(cmd))
        {
            da.Fill(dt);
        }

        foreach (DataRow row in dt.Rows)
        {
            sorts.Add(row[0].ToString());
        }

        cn.Close();
    }
    return string.Join(",", sorts.ToArray());
}
 

3.        在default.aspx檔案新增js、css檔案：

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
<link href="Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

4.        在default.aspx的head部分中$().ready(function ())函式中呼叫webservice獲取自動補全的資料，並將資料關聯到輸入框中。

<script type="text/javascript">
    $().ready(function () {
        
        NewsSort.getSortList(OnComplete, OnFailed, null);

        function OnComplete(args, context) {
            $('#MainContent_searchBox').AutoComplete({
                'data': args.split(","),
                'itemHeight': 20,
                'listDirection': 'down',
                'width': 280
            }).AutoComplete('show');
        }

        function OnFailed(args) {
            alert("出錯了！");
        }
    });
</script>