kendo AutoComplete实现多筛选条件
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,演示样例仅仅是做了或运算,其它的运算也是能够的,大家能够灵活应用,开发自己的大脑。
kendo AutoComplete实现多筛选条件的更多相关文章
- sql之表连接 筛选条件放在 连接外和放在连接里的区别
使用一个简单的例子,说明他们之间的区别 使用的表:[Sales.Orders]订单表和[Sales.Customers]客户表,和上一篇博客的表相同 业务要求:查询出 : 所有的用户 在 2012-1 ...
- vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]
/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...
- 【html】前端实现筛选条件跳转
之前与PHP的合作模式之一是前端这边负责写好静态页面交货. 那现在新进的公司,PHP说筛选由前端来实现. 嗯,好吧.实现就实现,多锻炼下咯. <div class="fliter&qu ...
- django orm 以列表作为筛选条件进行查询
在Django的orm中进行查询操作时,可以通过传入列表,列表内的元素为索引值,作为一个筛选条件来进行行查询 from .models import UserInfo user_obj = UserI ...
- 在SharePoint列表中使用动态筛选条件[今日][Today]
如果在SharePoint使用了日历控件或者其他列表中有时间字段,用户经常希望能够动态使用条件字段进行筛选,例如希望筛选出开始日期是今天的事件.未来三日的事件. SharePoint的列表筛选条件支持 ...
- sql的where条件转换成mongdb筛选条件
解析字符串 filterModel1 and filterModel2 and (filterModel3 or filterModel4) 1.转换成mongo的筛选条件 /// <summa ...
- C# linq根据自定义筛选条件和所对应的数值进行筛选
在软件应用中有时候会出现这样的界面:上面是利用多选框和下拉框组合的筛选条件.下面表格展示筛选后的数据.如下图 上面是筛选条件,表格是根据筛选条件筛选的结果. 如果表格不支持筛选功能.可以利用Linq对 ...
- vue 自定义 移动端筛选条件
1.创建组件 components/FilterBar/FilterBar.vue <template> <div class="filterbar" :styl ...
随机推荐
- 【LeetCode】-- 73. Set Matrix Zeroes
问题描述:将二维数组中值为0的元素,所在行或者列全set为0:https://leetcode.com/problems/set-matrix-zeroes/ 问题分析:题中要求用 constant ...
- UIPickerView的应用
UIPickerView 是一个选择器控件, 它可以生成单列的选择器,也可生成多列的选择器.UIPickerView 直接继承了 UIView ,没有继承 UIControl ,因此,它不能像 UIC ...
- Struts2 之 实现文件上传(多文件)和下载
Struts2 之 实现文件上传和下载 必须要引入的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar 01.文件上传需要分别在struts.xm ...
- Android 获取android安装apk框的安装状态(如点击取消、返回)
最近鼓捣android,碰到个问题,因为没有root权限,需要调用Intent安装apk,但需要获取用户是否安装了(如,用户点击了返回或取消),查了很多文章,最后可以解决,但有瑕疵,解决方法如下: p ...
- Less——less基本安装
1.下载node.js 我们需要NodeJ运行LESS示例. 要下载NodeJ,请打开链接https://nodejs.org/en/ 2.node.js安装是否正确 在cmd中输入lessc -v, ...
- jdbc 使用谨记
jdbc是java操作数据库的杀手锏.所有java程序员,对jdbc应该都不陌生. 但是,应该你也曾经被其折磨的抓耳挠腮,咬牙切齿吧,也许正因为这样你才对其记忆犹新,刻骨铭心. 这里有一些使用jdbc ...
- RTL Compiler之Technology Library
1 Target Library Design Compiler uses the target library to build a circuit. During mapping, Design ...
- 在把table表格中的数据导出到Excel的时候,以科学计数法显示位数多的数字时怎么解决?
sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.Append ...
- QQ空间里写的开发心得
不回头看一眼还真没发现我已经写过这么多开发心得日志. 理一理设备数据走向 https://user.qzone.qq.com/1156740846/blog/1522292793 action的生命 ...
- Oracle 【基 本 操 作】
1.日期时间 select SYSDATE from DUAl; select TO_CHAR(SYSDATE, 'YYYY-MM-DD') from DUAL; select TO_CHAR(SYS ...