Extjs3 Combo实现百度搜索查询
在Extjs中实现Combo手输模糊筛选出下拉框数据。之前一直利用的Combo的keyup来实时的请求数据库进行查询。最近发现了一个更好的方式:只需要引用一个ComboBoxQuery
Ext.ns('Ext.plugins.ComboBoxQuery');
Ext.plugins.ComboBoxQuery = function (config) {
Ext.apply(this, config);
};
Ext.extend(Ext.plugins.ComboBoxQuery, Ext.util.Observable, {
minChars: 1,
init: function (combo) {
this.combo = combo;
this.combo.on('beforequery',function(qe){
var cmb = qe.combo;
var q = qe.query;
var forceAll = qe.forceAll;
if (forceAll === true || (forceAll == undefined && cmb.mode == 'remote') || (q.length >= this.minChars)) {
if (cmb.lastQuery !== q) {
cmb.lastQuery = q;
if (cmb.mode == 'local') {
cmb.selectedIndex = -1;
if (forceAll||q==="") {
cmb.store.clearFilter();
} else {
// 检索的正则
var regExp = new RegExp(".*" + q + ".*", "i");
// 执行检索
cmb.store.filterBy(function(record, id) {
// 得到每个record的项目名称值
var text = record.get(combo.displayField);
return regExp.test(text);
});
}
cmb.onLoad();
} else if (cmb.forceQueryInLocal){
if(cmb.store.getCount()>0){
this.isRemoteStoreLoaded = true;
} else if(!this.isRemoteStoreLoaded){
cmb.store.load();
this.isRemoteStoreLoaded = true;
}
cmb.selectedIndex = -1;
if(q==="")
cmb.store.clearFilter();
else{
var regExp = new RegExp(".*" + q + ".*", "i");
// 执行检索
cmb.store.filterBy(function(record, id) {
// 得到每个record的项目名称值
var text = record.get(combo.displayField);
return regExp.test(text);
});
}
cmb.expand();
cmb.restrictHeight();
} else {
cmb.store.baseParams[this.queryParam] = q;
cmb.store.load({
params: cmb.getParams(q)
});
cmb.expand();
cmb.restrictHeight();
}
} else {
cmb.selectedIndex = -1;
cmb.onLoad();
}
}
return false;
});
//解决当combobox的store提前加载后,再点击输入框不能自动弹出下拉框的问题
this.combo.on('focus', function(cmb){
if(!cmb.list){
cmb.initList();
}
if(!cmb.isExpanded()) {
cmb.expand();
cmb.restrictHeight();
}
});
}
});
然后在Combo中加入
var Store = new Ext.data.JsonStore({
url: 'xxxx',
method: 'Post',
root: 'Table',
autoLoad: true,
fields: ['Id', 'Name']
}); xtype: 'combo',
editable: false,
mode: 'local',
displayField: 'Name',
valueField: 'Id',
triggerAction: 'all',
store: Store,
editable: true,
plugins: [new Ext.plugins.ComboBoxQuery()],
forceSelection: true,
width: 250,
fieldLabel: '测试'
主要是 plugins: [new Ext.plugins.ComboBoxQuery()],
forceSelection: true, 这两句代码。
plugins引用插件,
forceSelection:true输入只能是combo的数据源里存在的数据。
以上版本只在Extjs3的测试使用。
欢迎Extjs使用者加入QQ群:460607949一起交流学习。
Extjs3 Combo实现百度搜索查询的更多相关文章
- selenium 之百度搜索,结果列表翻页查询
selenium之百度搜索,结果列表翻页查询 by:授客 QQ:1033553122 实例:百度搜索,结果列表翻页查询 解决问题:解决selenium driver获取web页面元素时,元素过期问题 ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...
- 仿百度搜索(AJAX)
<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...
- 百度搜索URL参数 搜索关键字
http://www.baidu.com/s?wd=关键字 wd(Keyword):查询的关键词: http://www.baidu.com/s?wd=关键字&cl=3 cl(Class):搜 ...
- python使用get在百度搜索并保存第一页搜索结果
python使用get在百度搜索并保存第一页搜索结果 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用在意我的感受 #coding:utf-8 import ur ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- python爬取百度搜索结果ur汇总
写了两篇之后,我觉得关于爬虫,重点还是分析过程 分析些什么呢: 1)首先明确自己要爬取的目标 比如这次我们需要爬取的是使用百度搜索之后所有出来的url结果 2)分析手动进行的获取目标的过程,以便以程序 ...
- 百度api查询多个地址的经纬度的问题
在使用百度api查询多个地址的经纬度的时候,由于百度api提供的经纬度查询方法是回调函数,并且后续操作必须等经纬度获取完成才能进行,问题就存在于怎么判断所有地点是否都回调完成了,问了之前的一个前端大佬 ...
随机推荐
- HDU-4648 Magic Pen 6 简单题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4648 求遍前缀和,然后扫描标记下就可以了... //STATUS:C++_AC_453MS_1792K ...
- Android实例-拍摄和分享照片、分享文本(XE8+小米2)
结果: 1.分享文本不好使,原因不明.有大神了解的,请M我,在此十分感谢. 2.如果想支持图片编辑,将Action事件的Editable改为True. 相关资料: 官网地址:http://docwik ...
- 运用集合来做一个DVD管理器(全代码)
package DVD;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Array ...
- MYSQL- 分页存储过程
工作需要,用到MYSQL的分页功能,在网上找到一个不错的分页存储过程,代码整理了一下! 存储过程代码 CREATE PROCEDURE `sp_hj_splitpage`( in _pagecurre ...
- 实例:ABAP权限对象设计与权限检查的实现(详细)
学习总结,分享给大家,,,(有图有真像) 我在ECC里创建了一张表,随意插入了5条数据 创建权限对象,使分配这个权限的用户只能操作部门编号(edept)为 ‘10’ 的数据. 1. SU20,创建权限 ...
- Css基础-派生选择器
如果要修改li strong 里面文字的颜色可以这样写样式 派生选择器: li strong { color:red; } 效果:
- 给postfix设置黑名单
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- iOS 有关自动轮播图片
//初始化当前视图 _currentImageView = [[UIImageView alloc] init]; [_currentImageView setImageWithURL:[NSURL ...
- iOS中添加UITapGestureRecognizer手势识别后,UITableView的didSelectRowAtIndexPath失效
ViewDidLoad中注册手势的部分代码如下: [cpp] view plaincopy UITapGestureRecognizer *oneTap = [[[UITapGestureRecogn ...
- PHP strlen() 函数
定义和用法 strlen() 函数返回字符串的长度. 语法 strlen(string) 参数 描述 string 必需.规定要检查的字符串. 例子 <?php echo strlen(&quo ...