Kendo UI之AutoComplete自動補齊_轉載

前言

  本文轉載自http://www.scscms.com/html/article/20131025-autocomplete.html
  在原文的基礎上，做了部分修改。

AutoComplete 自動補齊

  AutoComplete自動補齊：作用是自定義一些常用詞組綁定輸入框，當別人輸入字符時自動匹配對應的詞組生成下拉菜單，方便別人選擇以達到快速輸入的作用。

  使用Kendo UI必須在文檔裏添加css與js文件，如下所示：

<link href="styles/kendo.common.min.css" rel="stylesheet" />  
<link href="styles/kendo.default.min.css" rel="stylesheet" />  
<script src="js/jquery.min.js"></script>  
<script src="js/kendo.all.min.js"></script>  

👉AutoComplete基本使用示例：

<input id="countries" />  
<script type="text/javascript">  
    $(document).ready(function () {  
        var data = [  
            "Albania",  
            "Andorra",  
            "Armenia",  
            "Austria",  
            "Azerbaijan",  
            "Belarus",  
            "Belgium",  
            "Vatican City"  
        ];//定義數據  
        $("#countries").kendoAutoComplete({  
            dataSource: data,//綁定數據源  
            filter: "startswith",//過濾規則  
            placeholder: "Select country...",//佔位字符  
            separator: ", " //分割符  
        });  
    });  
</script>  

  說明：

• dataSource，數據源一般綁定的是數組，也可使用ajax綁定json數據；
• filter，過濾規則，意思是輸入的字符與提示的字符串的關係。startswith：是開頭匹配；
• placeholder，佔位符，作用是當沒有輸入值時提醒別人應該輸入什麼內容；
• separator，用於分割多個詞組之間的符號，每點一個下拉菜單時都會以此字符結束；

👉遠程請求數據示例：

  使用遠程數據作爲自動補齊的數據源，如下所示：

<input id="products" />  
<script type="text/javascript">  
	$(document).ready(function() {  
		$("#products").kendoAutoComplete({  
			dataTextField: "ProductName", //數據源對應的文本字段  
			filter: "contains",//過濾規則  
			minLength: 3,//最小輸入長度，必須達到此字符纔開始請求服務器  
			dataSource: {  
				type: "odata",//數據協議類型,因爲涉及跨域所以使用類似jsonp的開放數據格式  
				serverFiltering: true,//服務器過濾  
				serverPaging: true,//服務器分頁  
				pageSize: 20,//分頁大小：20條數據爲一頁  
				transport: {  
					read: "http://demos.kendoui.com/service/Northwind.svc/Products"//請求地址  
				}  
			}  
		});  
	});  
</script>  

  瀏覽器發起的請求爲：
http://demos.kendoui.com/service/Northwind.svc/Products?$callback=jQuery19103602032717921885_1382672830621&%24inlinecount=allpages&%24format=json&%24top=20&%24filter=substringof%28%27ken%27%2Ctolower%28ProductName%29%29

  服務器返回的數據格式爲：

jQuery19103602032717921885_1382672830621(
{
	"d" : {  
		"results": [  
			{  
				"__metadata": {  
					"uri": "http://demos.kendoui.com/service/Northwind.svc/Products(47)", 
					"type": "SampleModel.Product"  
				}, 
				"ProductID": 47, 
				// "ProductName"有數據，此時會生成自動提示下拉框
				"ProductName": "Zaanse koeken", 
				"SupplierID": 22, 
				"CategoryID": 3, 
				"QuantityPerUnit": "10 - 4 oz boxes", 
				"UnitPrice": "9.50", 
				"UnitsInStock": 36, 
				"UnitsOnOrder": 0, 
				"ReorderLevel": 0, 
				"Discontinued": false, 
				"Category": {  
					"__deferred": {  
						"uri": "http://demos.kendoui.com/service/Northwind.svc/Products(47)/Category"  
					}  
				}, 
				"Order_Details": {  
					"__deferred": {  
						"uri": "http://demos.kendoui.com/service/Northwind.svc/Products(47)/Order_Details"  
					}  
				}, 
				"Supplier": {  
					"__deferred": {  
						"uri": "http://demos.kendoui.com/service/Northwind.svc/Products(47)/Supplier"  
					}  
				}  
			}  
		], 
		"__count": "1"  
	}  
})  

👉在AutoComplete中使用模板

  此功能甚是好，變成可訂製的自動補齊下拉列表。AutoComplete模板示例：

<input id="customers" />  
<script>  
    $(document).ready(function() {  
        var autocomplete = $("#customers").kendoAutoComplete({  
            minLength: 1,  
            dataTextField: "ContactName",  
            template: '<img src=\"../../content/web/Customers/${data.CustomerID}.jpg\" alt=\"${data.CustomerID}\" />' +  
                    '<h3>${ data.ContactName }</h3>' +  
                    '<p style=\"close:both\">${ data.CompanyName }</p>',  
            dataSource: {  
                transport: {  
                    read:{  
                        dataType: "jsonp",  
                        url: "http://demos.kendoui.com/service/Customers"  
                    }  
                }  
            },  
            height: 370  
        }).data("kendoAutoComplete");  
    });  
</script> 

👉AutoComplete配置項詳解

  AutoComplete的配置項有：

• 🍓animation動畫效果
• 🍑dataSource數據源
• 🥝dataTextField數據字段
• 🍅delay延時時間
• 🍎enable是否可用
• 🍍filter過濾規則
• 🥭ignoreCase過濾規則之忽略大小寫
• 🍈height下拉列表高度
• 🍉highlightFirst下拉列表第一個自動高亮
• 🍇minLength彈出提示的最小長度
• 🍋placeholder佔位符
• 🍏separator分隔符
• 🥕suggest自動填充
• 🥔template模板
• 🍆valuePrimitive綁定原始值

🍓animation動畫效果

<<返回目錄🏡
  示例如下：

<script>
	/*示例一和二，二選一即可*/
    //示例一：關閉動畫
    $("#autocomplete").kendoAutoComplete({
        animation: false
    });
    //示例二：指定打開與關閉時的動畫效果
    $("#autocomplete").kendoAutoComplete({
        animation: {
            close: {
                effects: "fadeOut zoom:out",//關閉時動畫特效類型，多個特效用空格隔開。  
                duration: 300 //關閉時動畫持續的時間，單位是毫秒。  
            },
            open: {
                effects: "fadeIn zoom:in",
                duration: 300
            }
        }
    });  
</script>

🍑dataSource數據源

<<返回目錄🏡
  示例如下：

<script>
    //數組型數據源  
    $("#autoComplete").kendoAutoComplete({
        dataSource: {
            data: ["One", "Two"]
        }
    });
    //kendo的數據源  
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/products",
                dataType: "jsonp"
            }
        }
    });
    $("#autocomplete").kendoAutoComplete({
        dataSource: dataSource,
        dataTextField: "ProductName"
    });  

	// 操作數據源
	var autocomplete = $("#autocomplete").data("kendoAutoComplete");
	autocomplete.dataSource.read();
	autocomplete.dataSource.add({ name: "Appricot" });//增加項  
	autocomplete.search("A");  
</script>

🥝dataTextField數據字段

<<返回目錄🏡
  指定要綁定的是dataSource中的哪個字段，默認是null。示例如下：

<input id="autocomplete" />
<script>
    var data = [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
    ];
    $("#autocomplete").kendoAutoComplete({
        dataTextField: "name", // 指定name字段來綁定  
        dataSource: data
    });  
</script>

🍅delay延時時間

<<返回目錄🏡
  當按下鍵盤與下拉列表出現的時間間隔，單位爲毫秒，默認是200。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        delay: 500
    });  
</script>

🍎enable是否可用

<<返回目錄🏡
  設置輸入框與下拉列表是否可用，默認是true。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        enable: false
    });  
</script>

🍍filter過濾規則

<<返回目錄🏡
  過濾規則是決定下拉列表與輸入字符串的關係。默認是“startswith”表示下拉列表的開頭字符與輸入框的字符一致。還支持的規則有endswith（末尾匹配）和contains（包含）。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        filter: "contains"
    });  
</script>

🥭ignoreCase過濾規則之忽略大小寫

<<返回目錄🏡
  過濾搜索時是否忽略大小寫，設置爲false將區分大小寫過濾搜索，默認是true。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        ignoreCase: false
    });  
</script>

🍈height下拉列表高度

<<返回目錄🏡
  定義下拉列表的高度，單位是像素(px)，默認是200。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        height: 500
    });  
</script>

🍉highlightFirst下拉列表第一個自動高亮

<<返回目錄🏡
  定義下拉列表的第一個選項是否自動高亮（表示已經選擇，回車即可選取），默認是true。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        highlightFirst: false
    });  
</script>

🍇minLength彈出提示的最小長度

<<返回目錄🏡
  需要輸入至少多少個字符才啓用搜索生成下拉列表，默認是輸入1個字符。爲了匹配更精確與減少服務器請求建議不要設置太小的值。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        minLength: 3
    });  
</script>

🍋placeholder佔位符

<<返回目錄🏡
  當輸入框爲空時顯示的提示內容，默認爲空串""。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        placeholder: "Enter value ..."
    });
    //也可直接html裏定義<input id="autocomplete" placeholder="Enter value..." />
</script>

🍏separator分隔符

<<返回目錄🏡
  多個值時之間的間隔符，默認爲空串。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        separator: ", "
    });  
</script>

🥕suggest自動填充

<<返回目錄🏡
  當生成下拉列表時，是否自動填寫第一個選項內容到輸入框裏，默認爲false。示例如下：

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        suggest: true
    });  
</script>

🥔template模板

<<返回目錄🏡
  自定義下拉列表模板，比如生成帶相片的名單。示例如下：

<!-- 方式一 -->
<input id="autocomplete" />
<script id="template" type="text/x-kendo-template">
  <span>  
    <img src="/img/#: id #.png" alt="#: name #" />  
    #: name #  
  </span>  
</script>
<script>
    $("#autocomplete").kendoAutoComplete({
        dataSource: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        template: kendo.template($("#template").html())
    });  
</script>

<!-- 方式二 -->
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        dataSource: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
    });  
</script>

🍆valuePrimitive綁定原始值

<<返回目錄🏡
  當爲true時輸入框獲取dataValueField對應的值，爲false時獲取dataTextField對應的值，默認爲false。示例如下：

<input id="autocomplete" data-bind="value: productName, source: products" />
<script>
    $("#autocomplete").kendoAutoComplete({
        valuePrimitive: true,
        dataTextField: "name"
    });
    var viewModel = kendo.observable({
        productName: null,
        products: [
            { id: 1, name: "Coffee" },
            { id: 2, name: "Tea" },
            { id: 3, name: "Juice" }
        ]
    });
    viewModel.productName = viewModel.products[2];
    kendo.bind($("#autocomplete"), viewModel);  
</script>