Kendo UI之AutoComplete自动补齐_转载

最新推荐文章于 2023-04-30 23:07:04 发布

小匠石钧知

最新推荐文章于 2023-04-30 23:07:04 发布

阅读量1k

点赞数

分类专栏： KendoUI学习文章标签：前端

原文链接：http://www.scscms.com/html/article/20131025-autocomplete.html

版权

KendoUI学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

本文转载自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>

小匠石钧知

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Kendo UI之AutoComplete自动补齐_转载

文章目录前言AutoComplete 自动补齐????AutoComplete基本使用示例：????远程请求数据示例：????在AutoComplete中使用模板????AutoComplete配置项详解????animation动画效果????dataSource数据源????dataTextField数据字段????delay延时时间????enable是否可用????filter过滤规则????ignoreCase过滤规则之忽略大小写????height下拉列表...
复制链接

扫一扫