js 提示自动完成效果

最新推荐文章于 2021-05-30 23:04:31 发布

youjianbo_han_87

最新推荐文章于 2021-05-30 23:04:31 发布

阅读量873

点赞数

分类专栏： javascript J2EE 文章标签： function null javascript div ie 浏览器

本文链接：https://blog.csdn.net/youjianbo_han_87/article/details/7372946

版权

J2EE 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

javascript

35 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; chartset=GBK"/>
		<style>
			.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}
		</style>
		<script language="javascript">
			//--初始化提示
			var nameArray = ['张三','李四','www.baidu.com','111111','222222'];
			//--数组排序
			function arraySort()
			{
				nameArray.sort( function(a, b) {
				if(a.length>b.length)return 1;
				else if(a.length==b.length)return a.localeCompare(b);
				else return -1;
					}
				);
			}
			//--将需要提示的对象和提示div绑定
			function bindPompDiv(arrList,objInputId){
				var objouter=document.getElementById("suggDiv") //显示的DIV对象
				var objInput = document.getElementById(objInputId); //文本框对象
				var selectedIndex=-1;
				var intTmp; //循环用的:)
				if (objInput==null) {alert('页面初始化失败:没有找到"'+objInputId+'"文本框');return ;}
				//文本框失去焦点
				objInput.οnblur=function(){
					objouter.style.display='none';
				}
				//文本框按键抬起
				objInput.οnkeyup=checkKeyCode;
				//文本框得到焦点
				objInput.οnfοcus=checkAndShow;
				/**/
				function checkKeyCode(){
					var ie = (document.all)? true:false;
					if (ie)
					{
						var keyCode=event.keyCode ? event.keyCode : event.which;
						if (keyCode==40||keyCode==38){ //下上
							var isUp=false;
							if(keyCode==40) isUp=true;
							chageSelection(isUp);
						}else if (keyCode==13){//回车
							outSelection(selectedIndex);
						}else{
							checkAndShow();
						}
					}
					else{
						checkAndShow();
					}
					//divPosition();
				}
				//--非IE浏览器时
				function checkAndShow(){
					var strInput = objInput.value
					if (strInput!=""){
						divPosition();
						selectedIndex=-1;
						objouter.innerHTML ="";
						for (intTmp=0;intTmp<arrList.length;intTmp++){
							if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
								addOption(arrList[intTmp]);
							}
						}
						objouter.style.display='';
					}else{
						objouter.style.display='none';
					}
					function addOption(value){
						var sugg = "<div οnmοuseοver=\"this.className='sman_selectedStyle'\" οnmοuseοut=\"this.className=''\" οnmοusedοwn=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>";
						objouter.innerHTML += sugg;
					}
				}
				//--鼠标上下选择
				function chageSelection(isUp){
					if (objouter.style.display=='none'){
						objouter.style.display='';
					}else{
						if (isUp)
							selectedIndex++
						else
							selectedIndex--
					}
					var maxIndex = objouter.children.length-1;
					if (selectedIndex<0){selectedIndex=0}
					if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
					for (intTmp=0;intTmp<=maxIndex;intTmp++){

						if (intTmp==selectedIndex){
							objouter.children[intTmp].className="sman_selectedStyle";
						}else{
							objouter.children[intTmp].className="";
						}
					}
				}
				function outSelection(Index){
					objInput.value = objouter.children[Index].innerText;
					objouter.style.display='none';
				}
				function divPosition(){
					objouter.style.top=getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
					objouter.style.left=getAbsoluteLeft(objInput);
					objouter.style.width=getAbsoluteWidth(objInput)
				}
			}
			//--获取对象位置相关方法
			function getAbsoluteHeight(ob){
				return ob.offsetHeight
			}
			function getAbsoluteWidth(ob){
				return ob.offsetWidth
			}
			function getAbsoluteLeft(ob){
				var mendingLeft = ob .offsetLeft;
				while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
					mendingLeft += ob .offsetParent.offsetLeft;
					mendingOb = ob.offsetParent;
				}
				return mendingLeft ;
			}
			function getAbsoluteTop(ob){
				var mendingTop = ob.offsetTop;
				while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
					mendingTop += ob .offsetParent.offsetTop;
					ob = ob .offsetParent;
				}
				return mendingTop ;
			}
			//--清空字符串
			function trim(str){return str.replace(/^\s*(.*?)[\s\n]*$/g,'$1')}
			//--初始化
			function init()
			{
				bindPompDiv(nameArray,"name");
			}
		</script>
	</head>
	<body οnlοad="javascript:init();">
		<input type="text" size="30" name="name" id="name"/>
		<div id='suggDiv' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;'></div>
	</body>
</html>

youjianbo_han_87

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 提示自动完成效果

.sman_selectedStyle{background-Color:#102681;color:#FFFFFF} //--初始化提示 var nameArray = ['张三','李四','www.baidu.com','111111','222222']; //--数组排序 function arraySort() { nameArray.
复制链接

扫一扫

专栏目录