kendo AutoComplete实现多筛选条件

kendo autoComplete 原始情况下是不支持多筛选条件的

[html] view plain copy print ?

1. $("#autocomplete").kendoAutoComplete({  
2.   filter: "contains"  
3. });  

$("#autocomplete").kendoAutoComplete({
  filter: "contains"
});

根据autocomplete 提供的api可以知道使用filter有三种，分别是 startswith ,  endswith  ,  contains。但是作为中文使用用户，我们该怎么办呢。很多时候，我们希望搜索出来的东西可以通过汉字或者拼音过滤，但是原始的autocomplete是无法帮助我们实现这以功能的。

接下来我们改造下，基于autocomplete做一个多过滤条件的autocomplete

具体代码如下：

[javascript] view plain copy print ?

1. kendo.ui.plugin(kendo.ui.ComboBox.extend({  
2.     options: {  
3.         name: "MultiFilterComboBox"  
4.     },  
5.     _filterSource: function () {  
6.         this.dataSource.filter({  
7.             logic: "or",  
8.             filters: [  
9.                 { field: "code", operator: "contains", value: this.text() },  
10.                 { field: "name", operator: "contains", value: this.text() }  
11.             ]  
12.         });  
13.     }  
14. }));  

kendo.ui.plugin(kendo.ui.ComboBox.extend({
    options: {
        name: "MultiFilterComboBox"
    },
    _filterSource: function () {
        this.dataSource.filter({
            logic: "or",
            filters: [
                { field: "code", operator: "contains", value: this.text() },
                { field: "name", operator: "contains", value: this.text() }
            ]
        });
    }
}));

使用方法：

[javascript] view plain copy print ?

1. $("#Nation").kendoMultiFilterComboBox({  
2.     placeholder: "民族...",  
3.     dataTextField: "name",  
4.     dataValueField: "name",  
5.     filter: "contains",  
6.     dataSource:[{name:'汉族',code:'hanzu'},<pre name="code" class="javascript" style="color: rgb(85, 85, 85); font-size: 14px; line-height: 21px;">name:'苗族',code:'miaozu'}  

$("#Nation").kendoMultiFilterComboBox({
    placeholder: "民族...",
    dataTextField: "name",
    dataValueField: "name",
    filter: "contains",
    dataSource:[{name:'汉族',code:'hanzu'},<pre name="code" class="javascript" style="color: rgb(85, 85, 85); font-size: 14px; line-height: 21px;">name:'苗族',code:'miaozu'}

]});

html标签：

[html] view plain copy print ?

1. <input id="Nation"/>  

<input id="Nation"/>

现在我们就实现过组合过滤条件的autocomplete,示例只是做了或运算，其他的运算也是可以的，大家可以灵活应用，开发自己的大脑。