搜索框中输入文本自动提示候选项代码（像google那样的）

摘自电脑报2008年第18期 F11（91版）

<% @ Page Language="C#"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script  runat ="server" >

</ script >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
    
< script  type ="text/javascript"  language ="javascript" >

    var intIndex=0;arrList = new Array();

    function test() 
    {
        dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd");
        smanPromptList(arrList,"inputer1");
        smanPromptList(arrList,"inputer2");
        smanPromptList(arrList,"inputer3")
    }
       
    function dearray(aa)//定义array
    {
        arrList = aa.split(',');
        
    }
    function getAbsoluteWidth(ob)
    {
            return ob.offsetWidth
    }

    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(){
                    var clx,cly;
                    clx=event.clientX;
                    cly = event.clientY;
                    objouter.style.top    = cly+10;
                    objouter.style.left    = clx+20; 
                    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>");

</ script >
    
</ head >



< body  onload ="test()" >
     < form  id ="form1"  runat ="server" >
     < div >
        
          < table  border ="1"  align ="center"  cellspacing ="1"  id ="table1"  style ="BORDER-COLLAPSE: collapse"    >
               < tr  bgcolor ="#99CCFF" >
                 < td  bgcolor ="#CEE3FF" > 查询1 </ td >
                 < td  bgcolor ="#FFFFFF" >< input  type ="text"  id ="inputer1"   /></ td >
               </ tr >
               < tr  bgcolor ="#99CCFF" >
                 < td  bgcolor ="#CEE3FF" > 查询2 </ td >
                 < td  bgcolor ="#FFFFFF" >< input  type ="text"  id ="inputer2"   /></ td >
               </ tr >
               < tr  bgcolor ="#99CCFF" >
                 < td  height ="24"  bgcolor ="#CEE3FF" > 查询3 </ td >
                 < td  height ="24"  bgcolor ="#FFFFFF" >< input  type ="text"  id ="inputer3"   /></ td >
               </ tr >
         </ table >
    
     </ div >
     </ form >
</ body >
</ html >