支持缓存的autocomplete组件

最新推荐文章于 2024-03-28 23:06:23 发布

karl1235

最新推荐文章于 2024-03-28 23:06:23 发布

阅读量1.8k

点赞数

分类专栏：可复用工具类积累文章标签： autocomplete function callback html javascript ajax

本文链接：https://blog.csdn.net/karl5421/article/details/7056251

版权

可复用工具类积累专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网上也找了一些,但是还是想自己写一个,无奈自己的html太差,带下拉框的文本框这种效果做不出来...所以只把功能实现了,数据展示就没做...

思路: 键盘输入值---若通过检查,则先到缓存中查找---若缓存中没有,则发ajax请求,获取---再把新得到的值加入缓存中...这里的缓存区域但是DOM树的一个DIV,我命名为cachArea..

下面是这个页面的html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>autocomplete demo</title>

<script type="text/javascript" src="script/jquery.min.js"></script>

<script type="text/javascript">

//每一次javascript运行时 封装DOM缓存中的数据	
var cach = new Array(30); 

//对给定的id的控件,执行自动完成功能
function query( id ){

	
	var text = $("#"+id).val();	//获取值
	
	var checked = checkValue(text); //检查值是否符合规则
	if(checked == false ) return;
	
	var key = checked;
	initCach();	//初始化缓存
	var keyData = queryCach(key); //从缓存中查询数据
	if( keyData == false ){	//若缓存中不存在,发异步请求
		jQuery.ajax({
			url : "AutoCompleteAction.do",
			type : "POST",
			dataType: "json",
			data : {key:text},
			success : callback,
			cache : true,
			async : true
		});
	} else {	//做缓存中存在,则读取数据
		var cachtData = keyData.data;
		//.....在autocomplete组件中显示结果..
		// 这个组件暂时不会写..html基础较差..
		
		alert(" from cach :"+cachtData);
	
	}
}

function callback( ajaxData ){
	alert(" from ajax :"+ajaxData);
	//.....在autocomplete组件中显示结果..
	// 这个组件暂时不会写..html基础较差..
	addCach(ajaxData);
}


//将异步请求的结果放入缓存
function addCach( data ){
	var cachSize = $(".cach").size();
	if( cachSize < 10 ){
		$("#cachArea").append(' <input type="hidden" name="'+data.key+'" value="'+data.data+'" class="cach" />');
	}else{
		 $(".cach").eq(0).remove();
		 $("#cachArea").append(' <input type="hidden" name="'+data.key+'" value="'+data.data+'" class="cach" />');
	}
}


//从缓存中查询取出key的数据
function queryCach( key ){
　　　var data;
	for( i=0;i<cach.length; i++　){
		data = cach[i];
		if(data){
			var keyData = data.key;
			if( keyData == key ){
				return data;			
			}
		}
	}
	return false;
}


//初始化缓存,从dom树种读取数据,用数组保存
function initCach(){
	$.each($(".cach"), function(i, obj) { 
		cach[i] =  {key: $(this).attr("name"),data:$(this).val()}	  
	});
}


//检查值是否不合规则
function checkValue( value ){
	
	if( !value || value == "" || checkSpace(value)){
		return false;
	}
	
	return trim(value);
}


//去除左边的空格
function trimLeftSpace(str){
	
	var char0 = str.charAt(0);
	if( char0 != " " ){
		return str
	}
	
	var tempStr = str.substring(1,str.length);
	
	return trimLeftSpace(tempStr);
}

//取出右边的空格
function tirmRightSpace(str){
	var c = str.charAt(str.length-1);
	if( c != " " ){
		return str
	}
	
	var tempStr = str.substring(0,str.length-1);
	
	return tirmRightSpace(tempStr);
}

//取出左右两边的空格
function trim( value ){
	return tirmRightSpace(trimLeftSpace(value));
}


//检查是否所有字符都为空格
function checkSpace( str ){
	for(i=0;i<str.length;i++){
		var c = str.charAt(i);
		if( c != " ")
			return false;
	}
	
	return true;
}

</script>
</head>
<body>

	<input type="text" name="auto_complete_text" id="auto_complete_text" οnkeyup="query('auto_complete_text')"/>
	
	<div id="cachArea"></div>

</body>
</html>

karl1235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支持缓存的autocomplete组件

网上也找了一些,但是还是想自己写一个,无奈自己的html太差,带下拉框的文本框这种效果做不出来...所以只把功能实现了,数据展示就没做...思路: 键盘输入值---若通过检查,则先到缓存中查找---若缓存中没有,则发ajax请求,获取---再把新得到的值加入缓存中...这里的缓存区域但是DOM树的一个DIV,我命名为cachArea..下面是这个页面的html代码:autoc
复制链接

扫一扫