kendo AutoComplete实现多筛选条件

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

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

依据autocomplete 提供的api能够知道使用filter有三种。各自是startswithendswith , 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,演示样例仅仅是做了或运算,其它的运算也是能够的,大家能够灵活应用,开发自己的大脑。

时间: 2024-08-09 06:21:49

kendo AutoComplete实现多筛选条件的相关文章

laravel框架关联的模型怎么加入筛选条件

比如:商品模型关联评论模型,要给商品模型家条件很简单,在控制器里直接写就行了,但是要给关联的评论模型加筛选条件,该怎么加 protected $table = "wd_yylm_goods"; public function evaluate() { return $this->hasOne('App\Http\Model\EvaluateModel','good_id','id')->where('status',0); } 在商品模型里面定义关联关系的时候,后面加入wh

数据库中复杂的联查+筛选条件+排序+分页

数据库中复杂的联查+筛选条件+排序+分页一直是比较头疼的问题 为了模拟这个问题,首先建立两个表 create table t_userType ( id int identity(1,1) not null primary key, name varchar(50) ) GO create table t_user ( id int identity(1,1) not null primary key, t_userTypeId int not null, name varchar(50), f

高德云检索之多个筛选条件

之前检索方式是以keyword的形式去检索,只要满足索引管理中“文本索引”中的任意一个column对应的值匹配就可以. 那么如何通过某一个column的值来判断呢? 接下来我们通过条件筛选的是如何实现的 我们需要在url中通过filter命令: filter对应的筛选排序索引的详解 (http://lbs.amap.com/yuntu/guide/beginners/#yunntu_filter_sort) 筛选条件: 支持对建立了排序筛选索引的字段进行筛选(请在 数据管理台 中为字段建立排序筛

商品分类筛选条件建模数据表的设计

近端时间,由于商城项目的需求,学习探索了一下商品分类筛选条件.在学习过程中,一贯喜欢参考前人的东西,希望能从中得到一些独特的设计思路.京东.淘宝等大牛对这方面做得非常好,不管是用户体验还是技术方面.我们先看看京东的效果图 个人分析:京东的商品筛选中,每个子类型都对于一个具体的模型,而模型下又分为属性(如:功能)以及属性值集.经过两天的整理,总算成型.现在拿出来跟大家分享一下,有什么不足之处,希望大家不怜赐教. Model表 Attribute表 GoodsAttribute表 商品分类筛选条件建

jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件

/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author bear.LEE <571115139#qq.com> * @@since 2018-08-21 **/ ; (function ($) { $.fn.extend({ addClearBtn: function (options, $o) { var deft = { symbolClass: "f

vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue写的页面,页面a有筛选条件,跳转到其它页面,再跳转回A的时候,只有跳转修改页面modify的情况不清空筛选条件的实现方法

使用localStorage,进入修改页面,设置localstorage,跳转回筛选页面时,监听route,判定设置localStorage是否是具体的值,如果是,不清空筛选条件,否则清空,最后把删除设置的localstorage. 具体操作如下: 修改页面是modify.vue created () { const sign = 'modify' localStorage.setItem('signs', sign) } 筛选页面是a.vue '$route': function (to) {

MySQL 中 on与where筛选条件的区别

在两张表连接的时候才会有on的筛选条件,那么on和where的区别是什么呢? 在inner join中是没有区别的,但是在左连接和右连接中,区别就体现出来了,下面以左连接为例: 1.用on的时候,只对右表做筛选条件,而左表不受控制 2.用where的时候,对临时表的组合后的结果进行筛选,所以对左右表都是有作用的. 如下示例: 原文地址:https://www.cnblogs.com/fish-101/p/12076786.html

keep-alive实现返回保留筛选条件及筛选结果

实现页面返回时,保留筛选条件和筛选结果 说明 . keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM 实现 结合router实现部分页面缓存 模板应用 <keep-alive> <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view> </keep-alive> <router-vie