实用的ajax自动完成 下拉提示框

本文介绍了一种基于JavaScript的智能输入提示功能实现方法,通过数组排序和字符串匹配技术,为用户提供实时的输入建议,提高输入效率。该方案适用于多种输入场景,并支持键盘导航选择。
<script language="javascript">
var intIndex=0;arrList = new Array();
function dearray(aa)//定义array
{
  
//document.write(aa);
  arrList = aa.split(',');
  intIndex 
= arrList.length;
}

function test() {
   init();
   dearray(
"asp,csdn,aaaa,bbbbc,afd,werwe,adfs,ertr,qwq,qwqwq,trt,uyus,dsfs,uere,add,234,2,1dr4,ae4564,adf4645,afa3543,sdfse5,ae345345,sdf4564,34346536");
   smanPromptList(arrList,
"aspx");
   dearray(
"1sdfsdf.com,a11sdafs.net,b22dsafsdf,c333asdfsadf,4444dsafasdf,dddsfddsafdsaf,121213dsafsdaf,43213asdfadsf,dsa3121dasf3,a213,323313,3213,32213,dsfsdddd,ds11dfsfd,ffdafd,afdfd,afd,baffad,2fda2fd,dasd");
   smanPromptList(arrList,
"aspx2");
   smanPromptList(arrList,
"inputer")
}

function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
   arrList.sort( 
function(a, b) {
   
if(a.length>b.length)return 1;
   
else if(a.length==b.length)return a.localeCompare(b);
   
else return -1;
       }

   );
}

function smanPromptList(arrList,objInputId){
       
var objouter=document.getElementById("__smanDisp"//显示的DIV对象
       var objInput = document.getElementById(objInputId); //文本框对象
       var selectedIndex=-1;
       
var intTmp; //循环用的:)
       if (objInput==null{alert('smanPromptList初始化失败:没有找到"'+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
                   
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()
           }

           
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)==strInput){
                                   addOption(arrList[intTmp]);
                               }

                           }

                           objouter.style.display
='';
                       }
else{
                           objouter.style.display
='none';
                   }

                   
function addOption(value){
                       objouter.innerHTML 
+="<div onmouseover="this.className='sman_selectedStyle'" onmouseout="this.className=''" onmousedown="document.getElementById('"+objInputId+"').value='" + value + "'">" + value + "</div>"    
                   }

           }

           
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)
           }

   }

   document.write(
"<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
   document.write(
"<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
   
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 ;
   }

</script>
<body onload="test()">
</body>
请输入内容:
<input type="text" id="inputer"> 如 a  提示东东 和 下面不一样的
<br>
<font color="red">
请输入内容:
<br>
<input type="text" id="aspx">如 a  提示东东 和 下面不一样的
<br>
</font>
<input type="text" id="aspx2"><br>
<font color="red" >
我想实现 
&lt;input type="text" id="aspx2" onclick="函数(东东1,东东2,东东3);" &gt; <br>
就提示 东东1
<br>
东东2
<br>
东东3
<br>
&lt;input type="text" id="aspx2" onclick="函数(提示1,提示2,提示3);" &gt; <br>
就提示 提示1
<br>
提示2
<br>
提示3
<br>
</font>
 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值