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

< 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 οnmοuseοver="this.className='sman_selectedStyle'" οnmοuseοut="this.className=''" οnmοusedοwn="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 >
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值