關於Ajax控件中的AutoCompleteExtender控件的一個簡單應用

關於Ajax控件中的AutoCompleteExtender控件的一個簡單應用

今天在看一個朋友用到了這個AutoCompleteExtender控件，感覺不錯，給客戶的體驗應該是不錯的，這個控件主要是用於根據客戶輸入的字符來搜索出相應的內容顯示在下拉列表框中。

看這個控件的名字就知道是一個可擴展的控件了，它必須依賴於別人而存在-----這個別人指的是文本框. 所以, 首先要有一個宿主文本框:

<asp:TextBoxID="TextBox9"runat="server"></asp:TextBox>

<cc1:AutoCompleteExtenderID="TextBox9_AutoCompleteExtender"runat="server" Enabled="True"

OnClientItemSelected="ProductSelect"EnableCaching="true"CompletionInterval="100"

MinimumPrefixLength="1"ServiceMethod="GetProductList"ServicePath="~/Marketing/MyAutoComplete.asmx"

TargetControlID="TextBox9">

</cc1:AutoCompleteExtender>

這就是一個默認的文本框, 不需要任何多餘的設定. 然後定義一個AutoCompleteExtender, 這裏我們只設置了最基本的選項, 其它的選項後面我會說明:
這樣 , 前臺的工作就完成了, 然後還需要添加一個web 服務, 來向AutoCompleteExtender返回數據. 向項目中添加一個"web服務"文件, 如下圖所示:

添加以後, 會在項目中生成一個webservice.asmx 文件, 不用管它, 因爲使用了代碼分離, 所以它只是一個路徑引用, 用記事本打開它, 會發現這個文件只有一行, 指向App_Code 下面的同名, 但是擴展名爲.cs 的文件. 我們現在打開App_Code目錄, 找到webservice.cs , 會看到這樣的幾行:
[WebService(Namespace ="http://tempuri.org/")]
[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService: System.Web.Services.WebService
默認情況下, 第三行屬性[System.Web.Script.Services.ScriptService] 是被註釋掉的, 把它打開 , 因爲我們要在客戶端調用. 然後就可以寫入我們的方法了, 方法如下:

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using System.Collections.Generic;

using System.Data.SqlClient;

///<summary>

///MyAutoComplete

///</summary>

[WebService(Namespace ="http://tempuri.org/")]

[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

publicclass MyAutoComplete : System.Web.Services.WebService {

public MyAutoComplete () {

}

[WebMethod]//這個方法是必須的，每建立一個方法就的加上這個，不然遠程客戶端就不能調用定義的方法

public List<string> GetResult(string prefixText,int count)

{

List<string> getrs =new List<string>();

string sql ="select top " + count.ToString() + " UserName,Pwd from Test where UserName like '%" + prefixText.ToString() +"%' ";

SqlDataReader dr =DB.getdatareader(sql);

while (dr.Read())

{

string content = dr.GetString(0);

getrs.Add(content);

}

dr.Close();

//dr.Dispose();

return getrs;

}

}

這個函數的第一個參數, 就是用戶錄入的內容, 第二個參數, 是定義中指定的下拉列表長度, 也就是要返回的項的個數, 我們在定義中沒有指定長度, 它會使用一個默認長度10 .

4.AutoCompleteExtender的其它屬性 
雖然到現在這個程度它已經可以動起來了, 但是還有很多屬性我們沒有用到, 下面我們逐個瞭解它的其它屬性. 
TargetControlID
這是必須指定的屬性, 它指出Extender 應該寄宿到哪個控件身上, 上面的例子已經演示了它的用法, 就把目標控件的ID 賦給它即可.
ServicePath
指出要使用的服務的路徑, 這裏指的是asmx文件的路徑, 而不是cs文件, 因爲這裏兩個文件都處於根目錄, 所以直接寫入了文件名, 如果兩個文件不在同一目錄, 還要指出該asmx文件所在的路徑. 例如: ../xx.asmx .
ServiceMethod
返回數據的函數, 填入目標函數名即可. 
MinimumPrefixLength
最少需要錄入的長度, 因爲我們指定了1, 所以只要敲入一個字符, 就會立即彈出下拉列表, 如果把這個值改爲3, 則至少要錄入3個字符, 纔會彈出下拉列表.
ContextKey
關於這個屬性我有專門的一篇文章介紹, 請參閱ajaxToolkit:AutoCompleteExtender的自定義參數（contextKey)
UseContextKey
如果指定了ContextKey參數, 這個屬性會被默認置爲true, 所以一般不用去管這個參數 , 不過如果因爲某種原因程序出了異常-----我就遇到過這種情況, 沒有指定ContextKey參數, 但它非要調用包含ContextKey 的形式-----就可以顯式地指定這個參數爲true 或false.
CompletionInterval
它的單位是毫秒, 就是用戶錄入後多長時間, 程序去調用服務來獲取數據 , 一般我設這個屬性的值爲1000. 或不設, 用它默認的值. 
EnableCaching
這是一個要非常小心的屬性, 如果把它設爲true, 允許緩存, 則, 例如, 我第一次錄入1, 返回包括1 的串, 然後我修改了數據源, 再次錄入1, 還是返回以前的串, 在調試模式下, 在服務那邊下斷點, 會看到程序根本沒有進來. 也就是說, 對於同樣的錄入, 控件只獲取一次數據, 有多數情況下, 這是有益的, 它可以減少數據訪問的次數, 但是在數據源經常變化的情況下, 它就是致命的, 它會向用戶提供過時的, 錯誤的信息.
CompletionSetCount
這個屬性指定一次應該返回多少項, 我們上面沒有指定它, 返回了10項, 如果我們希望返回20項, 就指定它爲20 即可.
CompletionListCssClass, CompletionListItemCssClass 和 CompletionListHighlightedItemCssClass
背景樣式, 條目樣式, 和鼠標懸念時所指向的條目的樣式. 
DelimiterCharacters
如果允許一次選中多項, 中間的分隔符 , 我個人感覺這個很容易造成混亂, 最好把它的值設成空, 也就是不允許選中多項. 
FirstRowSelected
是否默認選中第一項.

其實還有一個屬性是比較重要的，就是OnClientItemSelected，這個是調用一個方法，該方法用於對已經選擇項後執行的事件。這個以後有時間再舉例說明。

轉載於:http://blog.csdn.net/liu_ben_qian/article/details/6649261