js 提示自动完成效果
2012-03-20 13:27
417 查看
<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.onblur=function(){ objouter.style.display='none'; } //文本框按键抬起 objInput.onkeyup=checkKeyCode; //文本框得到焦点 objInput.onfocus=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 onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"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 onload="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>
相关文章推荐
- eclipse 关闭js自动完成提示
- 用js实现输入提示(自动完成)的实例代码
- 设置MyEclipse支持Java/JS页面的自动完成提示
- inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
- JavaScript-----用js实现输入提示(自动完成)[转载]
- 用js实现输入提示(自动完成)
- inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
- js文本框提示和自动完成
- js仿baidu google 实用的文本框内容自动完成效果
- js实现input 的自动完成提示,Autocomplete---此文失效请使用jquery easy-ui更方便(后加)
- 文本框自动完成提示效果
- 用js实现输入提示(自动完成)的实例代码
- 用js实现输入提示(自动完成)
- autocomplete-自动完成-搜索提示-仿google提示效果
- 仿微博140字符限制 超过红色闪动提示js效果
- JS实现的车标图片提示效果代码
- QuickXDev增强功能:用户自定义变量、函数自动完成提示及转到定义
- Eclipse中 js 自动提示 适用mac系统下的eclipse
- js滑动提示效果代码分享
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能