JQueryUI之Autocomplete_ZenDei技術網路在線

JQuery UI 是以 JQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控制項，這些控制項主要包括：Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Ma ...

　　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參數值輸出，否則將無法調用到回調函數。
　　最後附上實現效果圖：