kendo autoComplete 原始情況下是不支持多篩選條件的
$("#autocomplete").kendoAutoComplete({
filter: "contains"
});
根據autocomplete 提供的api可以知道使用filter有三種,分別是startswith
, endswith
, contains。但是作爲中文使用用戶,我們該怎麼辦呢。很多時候,我們希望搜索出來的東西可以通過漢字或者拼音過濾,但是原始的autocomplete是無法幫助我們實現這以功能的。
接下來我們改造下,基於autocomplete做一個多過濾條件的autocomplete
具體代碼如下:
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() }
]
});
}
}));
使用方法:
$("#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標籤:
<input id="Nation"/>
現在我們就實現過組合過濾條件的autocomplete,示例只是做了或運算,其他的運算也是可以的,大家可以靈活應用,開發自己的大腦。