Tom：/* Auto complete filtering in kendo ui */

2016-01-04T21:40:02Z

‎Auto complete filtering in kendo ui

新页面

==Kendo UI autocomplete retrieve id on select==

<source lang="javascript">
$("#autocomplete").kendoAutoComplete({
dataTextField: "Txt",
select: function(e) {
var dataItem = this.dataItem(e.item.index());

//output selected dataItem
$("#result").html(kendo.stringify(dataItem));
},
dataSource: {
data: [
{ Txt : "GB1", value: 1 },
{ Txt : "GB2", value: 2 },
{ Txt : "GB3", value: 3 },
{ Txt : "GB4", value: 4 }
]
}
});
</source>

==Auto complete filtering in kendo ui==

This is the DataSource and AutoComplete definition:

<source lang="javascript">
$("#products").kendoAutoComplete({
dataTextField: "name",
filter: "contains",
minLength: 3,
dataSource: {
transport: {
read: {
url: "/admin/countries",
type: "POST",
dataType: "json"
}
},
schema: {
model: {
id: "id",
fields: {
id: { type: "id" },
name: { type: "string" }
}
}
}
}
});
</source>

and this is how Countries list should be returned by the server.

<source lang="javascript">
[
{ "id":1, "name":"Albania" },
{ "id":2, "name":"Andorra" },
{ "id":3, "name":"Armenia" },
{ "id":4, "name":"Austria" },
{ "id":5, "name":"Azerbaijan" },
...
]
</source>

==自定义工具按钮==
<source lang="css">
.k-editor .k-myTool
{
background: 50% 50% no-repeat url(http://digitaltools.node3000.com/wp-content/themes/digital-tools/images/rss-icon-16x16px.png);
}

</source>

<source lang="javascript">
$("#editor").kendoEditor({
tools: [
{
name: "myTool",
tooltip: "My ToolTip",
exec: function(e) {
var editor = $(this).data("kendoEditor");
editor.exec("inserthtml", { value: '<img src="/images/275x185_2.jpg"/>' });
}
}
]
});
</source>

Kendo ui - 版本历史

Tom：/* Auto complete filtering in kendo ui */