kendoUI系列教程之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

<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

<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

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

4、延时显示时间 delay

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

5、是否可用 enable

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

6、过滤规则 filter

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

7、过滤规则忽略大小写 ignoreCase

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

8、下拉列表高度 height

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

9、下拉列表第一个自动高亮 highlightFirst

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

10、忽略大小写 ignoreCase

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

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

12、占位符 placeholder

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

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

14、自动填充 suggest

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

<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

<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>

<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

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var element = autocomplete.element;
    var options = autocomplete.options;
</script>

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var list = autocomplete.list;
</script>

4、列表 ul

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete();
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
    var ul = autocomplete.ul;
</script>

<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 快捷键

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

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

• 

  7

  高兴
• 

  0

  支持
• 

  0

  搞笑
• 

  0

  不解
• 

  0

  谎言
• 

  0

  枪稿
• 

  1

  震惊
• 

  0

  无奈
• 

  0

  无聊
• 

  0

  反对
• 

  0

  愤怒