這是AJAX的典型應用之一，即根據使用者在輸入框內輸入的內容來搜尋資料庫，然後把內容顯示出來，當然不一定非要顯示在下拉框中，也可以放在其它的地方，我們這裡只是把搜尋到的內容填充到下拉框中，以便使用者精確定位。效果圖如下：

一.JS需呼叫伺服器端方法及時響應客戶端使用者輸入的內容

1.在頁載入事件期間,通過Ajax.Utility.RegisterTypeForAjax註冊包含服務端函式的類，假設頁面後臺是stuInfoView.aspx.cs，需要呼叫的伺服器端函式也在此頁面。
private void Page_Load(object sender, System.EventArgs e)
{
        Ajax.Utility.RegisterTypeForAjax(typeof(stuInfoView));
}
2.給將要被JS呼叫的函式前面標上Ajax.AjaxMethodAttribute，由於以Attribute結尾的可以省略(見MSDN“元資料”)，也可以寫成Ajax.AjaxMethod。假設需用到的服務端函式是getMatchedStuId()，則如下定義：
[Ajax.AjaxMethod()]
public static string[] getMatchedStuId(string stuId)
{
/*
 * 接受JS引數stuId,然後搜尋資料庫，將滿足條件的記錄存入dataset再放到string陣列中，返回給客戶端JS，由JS接著處理(填充到下拉框中)
 * 搜尋資料庫方法可以有多種
*/
DataSet ds = (new projClass()).getStuInfo();//返回一個dataset,即所有的記錄
DataRow[] drs = ds.Tables["stuInfo"].Select("stuId like '"+stuId+"%'");//過濾
//將結果放入一個一個string陣列中，返回給客戶端的JS
if(drs != null)
{
        string[] result = new string[drs.Length];
        for(int i=0;i<drs.Length;i++)
                result[i] = Convert.ToString(drs[i]["stuId"]);
        return result;
}
return null;
}

二.使用者輸入內容後需馬上響應到後臺，輸入框(tbx_query)需加上keyup事件，使用者一輸入值則把輸入框的值傳送到後臺去搜索。

1.輸入框(tbx_query)是伺服器控制元件，後臺加keyup事件如下：
        this.tbx_query.Attributes.Add("onkeyup","matchStuId(this.value)");
2.keyup事件呼叫JS方法：
        function matchStuId(stuId)
        {
                /*stuInfoView即後臺的類名，getMatchedStuId是後臺允許客戶端JS呼叫的函式
                *前面的引數是用到的引數，最後的引數是服務端返回的內容到達客戶端後將要呼叫的JS函式，它接受伺服器端返回的內容
                *實際上就是XMLHttpRequest(AJAX技術的核心)物件readyStatus變為4時，客戶端該怎麼去處理伺服器端返回的內容
                *即呼叫JS方法CallBack處理返回的內容
                */
                stuInfoView.getMatchedStuId(stuId,CallBack);
        }
2.CallBack方法，接受後臺函式傳遞的內容進行一系列處理：
function CallBack(response)//response是後臺傳遞過來的內容，即後臺函式getMatchedStuId返回的一個string陣列
{
        var matchddl = document.Form1.ddl;//前臺填充值的下拉框，放在一個div中
        if(response.value.length != 0)
        {
                setdiv();//對包含下拉框的div進行位置處理
                matchddl.options.length = 0;
                matchddl.size = response.value.length;
                for(var i=0;i<response.value.length;++i)
                        matchddl.options[matchddl.options.length] = new Option(response.value[i]);//將string數組裡面的元素填充到下拉框中
        }
        else document.getElementById("ddldiv").style.display = 'none';//如果伺服器端沒有返回內容，div不可見，即下拉框不可見
}
3.setdiv()對層進行處理的函式
function setdiv()
{
        //根據輸入框的位置來設定div的位置，不用解釋了。
        var tbx = document.Form1.tbx_query;
        var ddldiv = document.getElementById("ddldiv");
        ddldiv.style.display = '';
        if(tbx.value =="")//輸入框輸入內容為空時，下拉框也不可見
                ddldiv.style.display='none';
        var etop = tbx.offsetTop;
        var eleft = tbx.offsetLeft;
        ddldiv.style.top = etop+180;
        ddldiv.style.left = eleft+35;
}
4.下拉框點選事件
function selectthis(sel)
{
        //使用者點選一條下拉框記錄，則將點選的記錄顯示到輸入框中
        document.getElementById('tbx_query').value = sel.options[sel.selectedIndex].text;
}

三.客戶端放入下拉框的DIV層

<div id="ddldiv" style=" display: none;z-index: 99;position: absolute"><select id="ddl" onclick="selectthis(this)"></select></div>