JQuery UI 是以 JQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件，這些控件主要包括：Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，其中Autocomplete能夠非常容易的幫我們實現類似於百度搜索的智能提示功能。最新JQuery UI可以從JQuery UI官網下載獲得。
一、首先了解下JQueryUI提供的重要屬性：
1. autoFocus：當智能提示框出現時，是否自動選中第一項，默認為false，即不選中。
2. delay：在按鍵后執行搜索的延時，默認為300ms。
3. disabled：是否禁用自動完成功能，默認為false。
4. minLength：觸發自動完成功能需要輸入的最小字符數量。
5. source：即為指定智能提示下拉框中的數據來源，支持三種類型。
Array，主要用於本地化數據提供，支持兩種格式：字符串數組 [ "Choice1", "Choice2" ]及標簽和值屬性的Json格式數組 [ { label: "Choice1", value: "value1" }, ... ]
String，用於ajax請求的遠程地址鏈接，返回Array或Json格式字符串。
Function，回調函數，最具有靈活性的一種方式，可用於返回任何數據源方式來實現自動完成，其中包含兩個參數request，response通過request.term 來獲取用戶輸入的值,通過response(argument)來對獲取的數據源進行顯示。
二、JQuery UI還提供了一些有用的方法：
1. close()：關閉智能提示選擇框。
2. destroy()：銷毀智能提示選擇框，將其所產生的元素完全刪除，使其恢復至初始狀態。
3. disable()：禁用自動完成功能。
4. enable()：開啟自動完成功能。
三、主要事件包括：
1. change(event, ui)：當值改變時發生，ui.item為選中的項。
2. close(event, ui)：當智能提示框關閉時發生。
3. create(event, ui)：當智能提示框創建時發生，可以在此事件中，對外觀進行一些控制。
4. focus(event, ui)：當智能提示列表任意一項獲得焦點時發生，ui.item為獲得焦點的項。
5. open(event, ui)：當智能提示框打開或更新時發生。
6. response(event,ui)：在搜索完成后智能提示框顯示前發生，可以在此事件中對顯示項進行處理。
7. search(event, ui)： 在開始請求之前發生，可以在此事件中返回false來取消請求。
8. select(event, ui)：當智能提示框中任意一項被選中時發生，ui.item為選中的項。
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Jquery UI Autocomplete</title> <link rel="stylesheet" href="/themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="/js/jquery-1.8.2.js"></script> <script type="text/javascript" src="/js/jquery.ui.core.min.js"></script> <script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script> <script type="text/javascript" src="/js/jquery.ui.position.min.js"></script> <script type="text/javascript" src="/js/jquery.ui.menu.min.js"></script> <script type="text/javascript" src="/js/jquery.ui.autocomplete.min.js"></script> </head> <body> <div style="margin:20px 50px;"> <input id="txtSearchKey" type="text" class="text ui-widget-content ui-corner-all" style="width:250px; height:30px;" /> <input id="btnSubmit" type="button" class="ui-button ui-widget ui-state-default ui-corner-all" value="搜索" /> </div> <script type="text/javascript"> $(function() { $("#txtSearchKey").autocomplete( { source: function(request, response) { $.ajax({ url: "http://demo.com/ajax/Autocomplete.ashx", dataType: "jsonp", data: { top: 10, key: request.term }, success: function(data) { response($.map(data.citylist, function(item) { return { label: item.city, value: item.city } })); } }); },
select: function(event, ui) {
//提交搜索...
}, minLength: 2, autoFocus: false, delay: 500 }); }); </script> </body> </html>
上例中實現了向遠程域發送鏈接請求，需要將dataType設置為“jsopn”格式，或者通過$.getJSON函數亦可。response對json中所有數據項進行遍歷操作，返回每一項的名稱，值得注意的地方時，label表示智能提示框中的每一項顯示的文本，而value表示每一項的值，即選中該項后所賦值給搜索框的value。另外為了相同關鍵字的反復發送搜索請求，我們還可加上本地緩存，其實就是用一個數組保存已經發送過請求的key和對應返回的data對象，所以也可以對以上js部分代碼修改如下：
<script type="text/javascript"> $(function() { var cache = {}; $("#txtSearchKey").autocomplete( { source: function(request, response) { var term = request.term; if (term in cache) { data = cache[term]; response($.map(data.citylist, function(item) { return { label: item.city, value: item.city } })); } else { $.ajax({ url: "http://demo.com/ajax/Autocomplete.ashx", dataType: "jsonp", data: { top: 10, key: term }, success: function(data) { if (data.citylist.length) { cache[term] = data; response($.map(data.citylist, function(item) { return { label: item.city, value: item.city } })); } } }); } }, select: function(event, ui) { //提交搜索... }, minLength: 2, autoFocus: false, delay: 500 }); }); </script>
對應服務端程序如下：
using System; using System.Web; using AutoCompleteDemo.common; using System.Collections.Generic; using System.Text; namespace AutoCompleteDemo.ajax { public class Autocomplete : IHttpHandler { public void ProcessRequest(HttpContext context) { string key = TextHelper.DangerStringClear(RequestHelper.GetQueryString("key")); int top = RequestHelper.GetIntQueryString("top", 10); string callback = TextHelper.DangerStringClear(RequestHelper.GetQueryString("callback")) + "({\"citylist\":["; if (!string.IsNullOrEmpty(key)) { City city = new City(); Dictionary<int, string> diclist = city.GetCityName(key, top); if (diclist != null && diclist.Count > 0) { StringBuilder sbJson = new StringBuilder(150); foreach (KeyValuePair<int, string> item in diclist) { sbJson.Append("{\"id\":" + item.Key + ",\"city\":\"" + item.Value + "\"},"); } callback += sbJson.ToString().Length > 0 ? sbJson.ToString().TrimEnd(',') : ""; } } context.Response.Write(callback + "]})"); } public bool IsReusable { get { return false; } } } }
必須注意的是，在發送跨域請求時，會自動附加一個callback參數（如果是通過$.getJOSN則是jsoncallback）在輸出json數據時，必須將callback參數值輸出，否則將無法調用到回調函數。
最后附上實現效果圖：