浏览器前端数据快速检索

我相信很多人Web开发人员都遇到过前端数据联想输入的问题。
例如:百度搜索时会联想出你想要检索的信息。
在这里插入图片描述
像这样的需求可能还是相当比较简单的,因为这种输入一般输入的速度并不是很快,通过keyup+ajax是可以满足要求的。
但是如果是财务软件,或者专有软件,普通办公人员都习惯使用小键盘进行快速输入。这个时候用keyup + ajax很多情况下就很难满足用户的需要了。而且用户的输入速度很快,无形中就会增加ajax发送的次数,对数据库查询和应用服务器都会产生不必要的负载压力。
那有没有相对较好的快速检索的方法呢?那我今天就提供一个浏览器前端快速检索的解决方案和实现的思路。
先上代码:

var search = function(config){
	var that = {
		conf:{
			regexp:"[\\d]+",
			source:null
		},
		toJson:function(val){
			val = val.replace(/[\r]/g,'').replace(/[\n]/g,'');
			return (new Function("return " + val))() || {};
		},
		tmpsource:{
			str:null,
			map:null,
			tplist:[]
		},
		init:function(conf){
			//初始化配置
			for(var item in conf){
				that.conf[item] = conf[item];
			}
			//反序列化数据存储到临时数据区
			that.tmpsource.map = that.toJson(that.conf.source || "{}");
			//构建结构化字符串
			for(var item in that.tmpsource.map){
				that.tmpsource.tplist.push(item);
			}
			that.tmpsource.str = that.tmpsource.tplist.join("|");
			that.tmpsource.tplist = null;
		}
	};
	that.init(config);
	return {
		select:function(fdstr,top){
			var reg = new RegExp("("+ that.conf.regexp + fdstr + that.conf.regexp + "|)","g"),
				tmp = that.tmpsource.str.match(reg),
				list = [];
			for(var i = 0,j = 0,len = tmp.length,jlen = top ? top : len; i < len && j < jlen; i++){
				if(tmp[i] != ""){
					list.push(that.tmpsource.map[tmp[i]]);
					j++;
				}
			}
			return list;
		}
	}
};

那如何使用呢?上代码:

var se = new search({
	source:"{'12345678':{'name':'12345678','id':'12345678'},'12645678':{'name':'12645678','id':'12645678'},'13645678':{'name':'13645678','id':'13645678'}}"
});
for(var i = 0; i < 10000; i++){
	var list = se.select("45",10);
	console.log(list);
}

search的构造函数有两个参数:
source是一个json字符串,由key和value组成,其中key是需要检索的值,value是key值对应的对象数据。
regexp是一个正则表达式。是用来匹配key值的。
实例化后的对象只有一个select函数,该函数有两个参数:
fdstr:该参数是要模糊匹配的字符串。
top:该参数是匹配前多少条数据。
该方案的总体实现思路是这样的,接收服务端响应的json数据后,将key值转换为内部特定格式。使用正则表达式对数据进行正则分组匹配,然后根据匹配的情况,通过key去map中获取对应的数据。
经过测试,10000次循环匹配可以很快完成,效率要比ajax快很多倍。
但是需要注意的点事,服务端响应的数据的key要提前排序好,该代码中没有添加前端排序的代码实现。个人认为前端排序意义也不大,服务端进行排序是比较简单的一件事情。
好了,今天就写这些了,欢迎大家使用,提修改意见。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值