combo 自动搜索

combo自动查询分local和remote两种模式。

remote模式

远程模式,需要配置的几个参数:

 - mode:'remote'          点击下拉菜单,store才开始加载数据
 - queryParam:'query'     默认“query“,与后台交互的查询字段名称
 - minChars:4            remote模式下默认是4

示例代码:

   {
        xtype:'combo',
        hiddenName:"orgId",
        store:orgStore,  
        displayField:"name",
        fieldLabel:"部门",
        valueField:"id",
        queryParam:'orgName',  // 自定义查询参数为orgName
        mode:"remote"
    }

local模式

本地模式,需要配置的参数:

 - mode:'local'          数据已经被加载
 - minChars:0           remote模式下默认是0

注意:

  • 问题分析

combo的local模式本身就带有自动搜索功能,但是中文查询可能会无效!!
combo查询实现,是调用其doQuery(q, forceAll)方法来实现,第一个参数q是输入的文本,第二参数forceAll是布尔类型,表示如果为true,输入长度小于minChars也可以强制搜索;如果为false,清除store中之前所有的过滤器。
但是问题就出在q这里,通常情况下我们输入字母、数字自动搜索都是没问题,当输入中文的时候就会出问题。那出什么问题呢?
q实际上是你键盘上键入的字符,举个例子,比如你要搜索”场“,使用拼音输入法,这里的q实际是”chang“,所以中文查询会失败

  • 解决方案

使用keyup事件来触发自动搜索,参见示例代码

示例代码:

    {
        xtype:'combo',
        hiddenName:"orgId",
        store:orgStore, 
        displayField:"name",
        fieldLabel:"部门",
        valueField:"id",
        mode:"local",
        maxHeight:300,
        enableKeyEvents:true,  // 开启键盘事件
        listeners:{
            keyup:function(that, e, eOpts){
                var query = that.getRawValue();  // 获取输入的文本值
                that.doQuery(query); // 执行搜索
            }
        }
    }

总结

  1. combo自动搜索分remote模式和local模式,配置参数有差异。
  2. local模式下中文搜索会失败,使用keyup事件实现搜索功能。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值