JQuery.UI類庫AutoComplete 調用WebService進行模糊查詢

時間 2019-11-22

標籤 jquery.ui jquery autocomplete 調用 webservice 進行模糊查詢欄目 JQuery 简体版

原文原文鏈接

JQuery.UI類庫AutoComplete 調用WebService進行模糊查詢javascript

1.介紹jQuery.UI中autocomplete參數介紹。php

此語法引用於：css

http://www.jb51.net/article/24219.htm

語法： autocomplete(urlor data, [options] ) 參數： url or data：數組或者url [options]：可選項，選項解釋以下： 1) minChars (Number) 在觸發autoComplete前用戶至少須要輸入的字符數，Default:1，若是設爲0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表。 2) width (Number) 指定下拉框的寬度，Default: input元素的寬度 3) max (Number) autoComplete下拉顯示項目的個數，Default: 10 
4) delay (Number) 擊鍵後激活autoComplete的延遲時間(單位毫秒)，Default: 遠程爲400 本地10 5) autoFill (Boolean) 要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框，Default: false 
6) mustMatch (Booolean) 若是設置爲true，autoComplete只會容許匹配的結果出如今輸入框,全部當用戶輸入的是非法字符時將會得不到下拉框，Default:false 
7) matchContains (Boolean) 決定比較時是否要在字符串內部查看匹配，如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false 
8) selectFirst (Boolean) 若是設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,儘管它沒被手工選中(用鍵盤或鼠標).固然若是用戶選中某個項目,那麼就用用戶選中的值. Default: true 
9) cacheLength (Number) 緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1爲不緩存.Default: 10 
10) matchSubset (Boolean) autoComplete可不可使用對服務器查詢的緩存,若是緩存對foo的查詢結果,那麼若是用戶輸入foo就不須要再進行檢索了,直接使用緩存.一般是打開這個選項以減輕服務器的負擔以提升性能.只會在緩存長度大於1時有效.Default: true 
11) matchCase (Boolean) 比較是否開啓大小寫敏感開關.使用緩存時比較重要.若是你理解上一個選項,這個也就不難理解,就比如foot要不要到FOO的緩存中去找.Default: false 
12) multiple (Boolean) 是否容許輸入多個值即屢次使用autoComplete以輸入多個值. Default:false 
13) multipleSeparator (String) 若是是多選時,用來分開各個選擇的字符. Default:"," 
14) scroll (Boolean) 當結果集大於默認高度時是否使用卷軸顯示 Default: true 
15) scrollHeight (Number) 自動完成提示的卷軸高度用像素大小表示 Default: 180 
16) formatItem (Function) 爲每一個要顯示的項目使用高級標籤.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中.Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的天然數), 當前結果數組元素的個數即項目的個數.Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值. 17) formatResult (Function) 和formatItem相似,但能夠將將要輸入到input文本框內的值進行格式化.一樣有三個參數,和formatItem同樣.Default: none,表示要麼是隻有數據,要麼是使用formatItem提供的值. 18) formatMatch (Function) 對每一行數據使用此函數格式化須要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row 19) extraParams (Object) 爲後臺(通常是服務端的腳本)提供更多的參數.和一般的做法同樣是使用一個鍵值對對象.若是傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {} 20) result (handler) Returns:jQuery 此事件會在用戶選中某一項後觸發，參數爲： event: 事件對象. event.type爲result. data: 選中的數據行. formatted:formatResult函數返回的值 例如： $("#singleBirdRemote").result(function(event, data, formatted){ //如選擇後給其餘控件賦值，觸發別的事件等等 
});

2.準備的jQuery和jQuery.UI版本信息html

<link type="text/css" rel="stylesheet" href="Content/themes/base/all.css" />
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.11.4.js"></script>

事件說明：java

jQuery UI Autocomplete有一些事件，可用於在一些階段進行額外的控制：

create(event, ui)：Autocomplete建立時，能夠在此事件中，對外觀進行一些控制
search(event, ui)： 在開始請求以前，能夠在此事件中返回false來取消請求
open(event, ui)：Autocomplete的結果列表彈出時
focus(event, ui)：Autocomplete的結果列表任意一項得到焦點時，ui.item爲得到焦點的項
select(event, ui)：Autocomplete的結果列表任意一項選中時，ui.item爲選中的項
close(event, ui)：Autocomplete的結果列表關閉時
change(event, ui)：當值改變時，ui.item爲選中的項

3.準備被調用的WebService代碼jquery

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

/// <summary>
/// WebService 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要容許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消註釋如下行。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //若是使用設計的組件，請取消註釋如下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetItem(string item)
    {
        string result = "";
        try
        {
            List<Product> list = new List<Product>();
            string[] array1 = { "A","B","C","D","1","2","3","4","5"};
            string[] array2 = { "PH880","PA962","TSC462","105SL",
                                  "LP2404","RH767","MS340","DSX81","NWA11001"};
            for (int i = 1; i < 120; i++)
            {
                int index=i%9;
                string code="LP"+array1[index];
                string name=array2[index]+"--"+i.ToString().PadLeft(3,'0');
                list.Add(new Product() { Code=code,Name=name});
            }
            item = item.ToUpper();
            var query = from n in list where n.Code.ToUpper().Contains(item) || n.Name.ToUpper().Contains(item) select n;

            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            result=javaScriptSerializer.Serialize(query.ToList());

        }
        catch 
        {

        }
        return result;
    }
    
}
public class Product 
{
    public string Code { get; set; }
    public string Name { get; set; }
}

4.jQuery.UI 中autocomplete調用WebService代碼ajax

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery類庫AutoComplete應用</title>
    <link type="text/css" rel="stylesheet" href="Content/themes/base/all.css" />
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.11.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var availableTags = ["C#", "C++", "Java", "JavaScript", "ASP", "ASP.NET", "JSP", "PHP", "Python", "Ruby"];

            var availableTagsJSON = [{ label: "C# Language", value: "C#" },{ label: "C++ Language", value: "C++" },
    { label: "Java Language", value: "Java" }, { label: "JavaScript Language", value: "JavaScript" },
    { label: "ASP.NET", value: "ASP.NET" }, { label: "JSP", value: "JSP" }, { label: "PHP", value: "PHP" },
    { label: "Python", value: "Python" }, { label: "Ruby", value: "Ruby" }];
            
            $("#txt_info1").autocomplete(
                {
                    source: availableTagsJSON
                });

            $("#txt_info2").autocomplete(
                {
                    minLength: 1,
                    source: function (request, response) {
                        $.ajax(
                            {
                                url:"WebService.asmx/GetItem",
                                datatype:"json",
                                data:"{'item': '"+ request.term + "' }",
                                type:"POST",
                                contentType: "application/json",
                                success:function (result) {
                                    var json = $.parseJSON(result.d);
                                  
                                    response($.map(json, function (data, index) {
                                        var obj = { label: data.Code + "--" + data.Name, value: data.Name };
                                        return obj;
                                    }))
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert(textStatus);
                                }
                            });
                    },
                    select: function (event, ui)
                    {
                        var array = ui.item.label.split("--");
                        $("#txt_code").val(array[0]);
                        $("#txt_id").val(array[2]);
                    }

                });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            請輸入查詢的值:<input id="txt_info1" type="text" />

            請輸入查詢的值:<input id="txt_info2" type="text" />
            <input id="txt_code" type="text" />
            <input id="txt_id" type="text" />
        </div>
    </form>
</body>
</html>