這節將使用jQuery UI的Autocomplete方法實現文本框的自動搜索填充功能，並且這里會使用另外一個方法來實現AJAX調用服務器方法，就是通過ASP.NET HTTP handler來處理請求的數據。現在就來看下實現的步驟：
1.創建SearchKeys.ashx請求處理文件，並實現以下代碼：
<%@ WebHandler Language="C#" Class="SearchKeys" %>
using System;
using System.Web;
// 添加兩個命名空間
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class SearchKeys : IHttpHandler {
/// <summary>
/// 根據關鍵字過濾內容
/// </summary>
/// <param name="keyword">關鍵字</param>
/// <returns>過濾數組</returns>
private string[] GetFilteredList(string keyword)
{
List<string> countryList = new List<string>();
countryList.Add("阿聯酋");
countryList.Add("阿富汗");
countryList.Add("阿爾巴利亞");
countryList.Add("阿魯巴");
countryList.Add("巴西");
countryList.Add("亞美利亞");
countryList.Add("西班牙");
List<string> filteredList = new List<string>();
foreach (string sCountry in countryList)
{
// 判斷是否包含關鍵字的國家，然后加入到過濾后的集合中。
if (sCountry.Contains(keyword))
{
filteredList.Add(sCountry);
}
}
// 返回數組，以便后面能序列化為JSON格式數據
return filteredList.ToArray();
}
public void ProcessRequest(HttpContext context)
{
string keyword = context.Request.QueryString["keyword"];
if (keyword != null)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
// 通過JavaScriptSerializer對象的Serialize序列化為["value1","value2",...]的字符串
string jsonString = serializer.Serialize(GetFilteredList(keyword));
context.Response.Write(jsonString); // 返回客戶端json格式數據
}
}
public bool IsReusable {
get {
return false;
}
}
}
2.創建頁面文件Recipe25.aspx,頁面代碼(HTML部分)如下：
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 100px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
<asp:Label ID="lblCountry" runat="server">國家：</asp:Label>
</td>
<td>
<asp:TextBox ID="txtSearch" runat="server" Width="150px"></asp:TextBox>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
3.頁面文件Recipe25.aspx的腳本代碼實現如下：(如何獲取和引入jQuery UI已經在前面章節講過，這里就不用重復了)
<link type="text/css" rel="Stylesheet" href="../Styles/sunny/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
minLength: 1, // 設置搜索的關鍵字最小長度
// 設置自動完成列表的函數，函數包括兩個參數，requset和response
source: function (request, response) {
$.ajax({
type: "POST",
// 通過request.term可以獲得文本框內容
url: "SearchKeys.ashx?keyword=" + request.term,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// jQuery.map(array, callback) :將一個數組中的元素轉換到另一個數組中。
// 下面就是把數組["value1", "value2",...]轉換為[{value:"value1"}, {value:"value2"},...]
response($.map(data, function (item) {
return { value: item };
}));
},
error: function () {
alert("ajax請求失敗");
}
});
}
});
});
</script>
4.實現效果圖：
5.分析XmlHttpRequest對象，請求參數和響應數據如下：
