实用的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
>