您当前位置:首页 > 文章中心 > HTML5+CSS3 > kendo UI

kendoUI系列教程之autocomplete自动补齐

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-25   阅读次数: 2124   查看权限: 游客查看

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之autocomplete自动补齐。

autocomplete自动补齐:作用是自定义一些常用词组绑定输入框,当别人输入字符时自动匹配对应的词组生成下拉菜单,方便别人选择以达到快速输入的作用。

使用kendui必须在文档里添加样式与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>

说明:

  1. dataSource:数据源一般绑定的是数组,也可使用ajax绑定json数据。
  2. filter:过滤规则,意思是输入的字符与提示的字符串的关系。startswith:是开头匹配。
  3. placeholder:这是html5的新属性占位符,作用是当没有输入值时提醒别人应该输入什么内容。
  4. 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>

当输入框架达到3个字符时就会发送一个请求: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": "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"
}
})

如果"ProductName"有数据就会生成下拉菜单。

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>

此功能甚是好,变成可订制的下拉列表。

Configuration配置项

1、动画 animation
类型:Object
说明:配置打开或者关闭下拉列表的特效。如果设值为false,打开或者关闭列表时将无动画。
<script>
//关闭动画示例
$("#autocomplete").kendoAutoComplete({
  animation: false
});
//指定打开与关闭时的动画效果
$("#autocomplete").kendoAutoComplete({
  animation: {
   close: {
     effects: "fadeOut zoom:out",//关闭时动画特效类型,多个特效用空格隔开。
     duration: 300 //关闭时动画持续的时间,单位是毫秒。
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
</script>
2、数据源 dataSource
类型:Object|Array|kendo.data.DataSource
说明:指定下拉列表的数据来源,可以是对象或者数据,或者是kendo的数据源。
<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"
});
</script>
3、数据字段 dataTextField
类型:String
默认:null
说明:由于ajax返回的数据或者是定义的数据对象可能含有很多种键值,数据字段可指定下列列表来源哪个字段。
<input id="autocomplete" />
<script>
var data = [
  { id: 1, name: "Apples" },
  { id: 2, name: "Oranges" }
];
$("#autocomplete").kendoAutoComplete({
  dataTextField: "name", // 指定name字段来绑定
  dataSource: data
});
</script>
4、延时显示时间 delay
类型:Number
默认:200
说明:当按下键盘与下拉列表出现的时间间隔,单位为毫秒。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  delay: 500
});
</script>
5、是否可用 enable
类型:Boolean
默认:true
说明:设置输入框与下拉列表是否可用。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  enable: false
});
</script>
6、过滤规则 filter
类型:String
默认:startswith
说明:过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith(末尾匹配)和contains(包含)。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  filter: "contains"
});
</script>
7、过滤规则忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤搜索时是否忽略大小写,设置为false将区分大小写过滤搜索。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  ignoreCase: false
});
</script>
8、下拉列表高度 height
类型:Number
默认:200
说明:定义下拉列表的高度,单位是像素(px)。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  height: 500
});
</script>
9、下拉列表第一个自动高亮 highlightFirst
类型:Boolean
默认:true
说明:定义下拉列表的第一个选项是否自动高亮(表示已经选择,回车即可选取)。
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  highlightFirst: false
});
</script>
10、忽略大小写 ignoreCase
类型:Boolean
默认:true
说明:过滤时是否忽略大小写,默认是忽略。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        ignoreCase: false
    });
</script>
11、最小长度minLength
类型:Number
默认:1
说明:需要输入至少多少个字符才启用搜索生成下拉列表,默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        minLength: 3
    });
</script>
12、占位符 placeholder
类型:String
默认:""
说明:当输入框为空时显示的提示内容。这本是html5的新属性。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        placeholder: "Enter value ..."
    });
    //也可直接html里定义<input id="autocomplete" placeholder="Enter value..." />
</script>
13、分割符 separator
类型:String
默认:""
说明:多个值时之间的间隔符,默认为空。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        separator: ", "
    });
</script>
14、自动填充 suggest
类型:Boolean
默认:false
说明:当生成下拉列表时,是否自动填写第一个选项内容到输入框里。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        suggest: true
    });
</script>
15、template
类型:String|Function
说明:自定义下拉列表模板,比如生成带相片的名单。
<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>
16、绑定原始值  valuePrimitive
类型:Boolean
默认:false
说明:当为true时输入框获取dataValueField对应的值,为false时获取dataTextField对应的值。(感谢:Yuliyana Kirova)
<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>

Fields 其他属性

1、数据源操作 dataSource
类型:kendo.data.DataSource
说明:通过它可操作数据项。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete({
        dataSource: [
            { name: "Apples" },
            { name: "Oranges" }
        ],
        dataTextField: "name"
    });
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    autocomplete.dataSource.read();
    autocomplete.dataSource.add({ name: "Appricot" });//增加项
    autocomplete.search("A");
</script>
2、选项集 options
类型:Object
说明:获取选项集对象。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var element = autocomplete.element;
    var options = autocomplete.options;
</script>
3、列表集 list
类型:JQuery
说明:获取下拉列表jquery对象。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var list = autocomplete.list;
</script>
4、列表 ul
类型:JQuery
说明:获取下拉列表父框架ul的jquery对象。
<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var ul = autocomplete.ul;
</script>

Methods 方法

<input id="combobox" />
<script>
    var dataSource = new kendo.data.DataSource({
        data: [ "Bananas", "Cherries" ]
    });
		$("#combobox").kendoComboBox({
			dataSource: [
				{ id: 1, name: "Apples" },
				{ id: 2, name: "Oranges" }
			],
			dataTextField: "name",
			dataValueField: "id"
		});
    var combobox = $("#combobox").data("kendocombobox");
    combobox.search("A");//启用搜索,如果匹配将打开下拉列表
    console.log(combobox.dataItem(0)); // 返回 "Apples"
    combobox.enable(true);//设置是否可用。可直接设置属性值enable:true
		combobox.readonly(true);//设置是否只读,只读与不可见是两回事哟。
		combobox.focus();//设置自动获取焦点
		combobox.open();//设置自动打开下拉列表
		combobox.refresh();//刷新,下列列表重新渲染
		combobox.text("Apples");//以文本来选择值
		var selectedIndex = combobox.select();//获取选择项的索引值
		combobox.select(1);//以索引值来选择值
		combobox.select(function(dataItem) {
				return dataItem.text === "Apples";//通过函数选择
		});
		combobox.setDataSource(dataSource);//设置数据源
    combobox.suggest("Apples");//选择值。与select不同,只接受String参数
    combobox.value("Apples");//设置值
    var value = combobox.value();//获取值
    combobox.close();//关闭下拉列表
    combobox.toggle();//切换下拉列表的开关    
    combobox.refresh();//刷新列表,使下拉列表重新渲染
    combobox.destroy();//销毁下拉列表,从DOC中删除
</script>

Events 事件

<script>
    $("#combobox").kendocombobox({
        dataBound: function(e) {
            // 数据绑定时触发
        },
        open: function(e) {
            // 打开下拉列表时触发
        },
        select: function(e) {
            var item = e.item;
            var text = item.text();
            // 选择了列表值时触发
        },
        change: function(e) {
            var value = this.value();
            //改变值时触发
        },
        close: function(e) {
            // 关闭下拉列表时触发
        },
        cascade: function() {
					// 用户交互或者通过api改变值时触发
				}
    });
    //所有事件均可通过bind方法绑定,如:
    function combobox_open(e) {}
    var combobox = $("#combobox").data("kendocombobox");
    combobox.bind("open", combobox_open);
</script>

注:支持RTL

Keyboard Navigation 快捷键

序号 快捷键 作用
1 alt + w 获取焦点。需要设置html5的accesskey属性
2 up arrow 高亮下拉列表上一个选项
3 down arrow 高亮下拉列表下一个选项
4 enter 选中高亮的选项
5 esc 关闭下拉列表
6 alt + down arrow 打开下拉列表
7 alt + up arrow 关闭下拉列表

在线测试:http://demos.kendoui.com/web/combobox/index.html

关键词: kendoui,html5,autocomplete   编辑时间: 2013-10-30 22:22:26

  • 感到高兴

    6

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    1

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(14)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程