實例代碼教程：一個基于AJAX的自動完成

　　建站學(xué)院(LieHuo.Net)技術(shù)文檔 我想大家在訪問某些網(wǎng)站的時候都曾見到過基于Ajax的自動完成功能,比如：http://www.google.com 輸入：上，還沒輸入完畢，下面就有了：上網(wǎng)導(dǎo)航。如下圖：

　　一、引出Ajax的自動完成

　　現(xiàn)在要實現(xiàn)一個員工信息查詢的功能，即根據(jù)輸入的名字檢索員工的詳細信息。這是一個簡單的數(shù)據(jù)表查詢，在ASP.NET中實現(xiàn)這樣的功能是比較簡單的.

      從上面可以看出,這種員工信息查詢功能還存在一些不足，比如用戶可能記不全員工的名字，只記得前面幾個字母是什么，這樣用戶只能根據(jù)記憶猜測，一遍遍地嘗試。如果在用戶輸入的同時，輸入框下方可以給出相應(yīng)的提示，輔助用戶輸入，那么用戶進行檢索的速度和成功率就會大大提高.這就是基于Ajax的自動完成功能

　　二、自動完成功能的實現(xiàn)
     實現(xiàn)這樣的功能需要按以下的步驟進行。

　　 服務(wù)器端提供GetSearchItems方法給客戶端，用來返回滿足條件的員工列表。
 　　客戶端的輸入框需要增加onkeydown響應(yīng)函數(shù)，以便即時獲取滿足條件的員工列表。
　　 通過客戶端的JavaScript動態(tài)列出待選結(jié)果的列表，同時還要提供鍵盤和鼠標(biāo)的響應(yīng)。

　　三、服務(wù)器端實現(xiàn)

     本文采用AjaxPro.NET作為Ajax開發(fā)框架，首先為使用AjaxPro.NET做一些準備工作。 添加對AjaxPro.dll的引用，修改Web.config配置文件，在system.web節(jié)點下加入如下配置：

以下為引用的內(nèi)容： <httpHandlers> <!-- Register the ajax handler --> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" /> </httpHandlers>

    在頁面后臺代碼（Default.aspx.cs）的Page_Load方法中增加下面的代碼：

以下為引用的內(nèi)容： protected void Page_Load(object sender, EventArgs e) {         AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); }

    下面定義提供給客戶端調(diào)用的方法GetSearchItems(),參數(shù)query為模糊查詢的關(guān)鍵字值：

以下為引用的內(nèi)容：     [AjaxPro.AjaxMethod()]     public ArrayList GetSearchItems(string query)     {         ArrayList items = new ArrayList();         StringBuilder queryString = new StringBuilder();         queryString.Append("select employeeid,lastname,firstname,title,titleofcourtesy from dbo.Employees");         queryString.Append(" where firstname like '%" + query + "%'");         DataSet ds = DataBase.Instance.ReturnDataSet(queryString.ToString());         for (int i = 0; i < ds.Tables[0].Rows.Count; i++)         {             items.Add(ds.Tables[0].Rows[i][2].ToString());         }         return items;     }

　　GetSearchItems方法返回一個ArrayList對象，它將包含所有以用戶輸入字符串的員工名字。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈