ajax自動完成 下拉提示框的疑問

ajax自動完成 下拉提示框的疑問

http://bbs.blueidea.com/thread-2691904-1-1.html
http://www.cnblogs.com/jinchun/archive/2007/03/28/691145.html

<script language="javascript">
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "1sdfsdf.com";
arrList[intIndex++] = "a11sdafs.net";
arrList[intIndex++] = "b22dsafsdf";
arrList[intIndex++] = "c333asdfsadf";
arrList[intIndex++] = "4444dsafasdf";
arrList[intIndex++] = "dddsfddsafdsaf";
arrList[intIndex++] = "121213dsafsdaf";
arrList[intIndex++] = "43213asdfadsf";
arrList[intIndex++] = "dsa3121dasf3";
arrList[intIndex++] = "a213";
arrList[intIndex++] = "323313";
arrList[intIndex++] = "3213";
arrList[intIndex++] = "32213";
arrList[intIndex++] = "dsfsdddd";
arrList[intIndex++] = "ds11dfsfd";
arrList[intIndex++] = "ffdafd";
arrList[intIndex++] = "afdfd";
arrList[intIndex++] = "afd";
arrList[intIndex++] = "baffad";
arrList[intIndex++] = "2fda2fd";
arrList[intIndex++] = "dasd";

function smanPromptList(arrList,objInputId){
    this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
    if (arrList.constructor!=Array){alert('smanPromptList初始化失敗:第一個參數非數組!');return ;}
    window.onload =function() {
                                 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;
                                })
        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).toUpperCase()==strInput.toUpperCase()){
                                    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;" + this.style + "' 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 ;
    }
}
smanPromptList(arrList,"aspx")
smanPromptList(arrList,"inputer")
</script>
請輸入內容：
<input type="text" id="inputer"> 如 a
<br>
<font color="red">
 改來改去還是只能用於一個文字框的下拉提示
</font>

如果是兩個的話就不能出來提示了呀。。。<br>
<input type="text" id="aspx"><br>
多個文字框的下拉提示 還是沒實現,
我的JS不好還請大家幫幫看看。我想

<font color="red">
實現多個文字框都能下拉提示 怎麼辦啊。。。<br>
</font>

 

增加一個函數.
function dropalert()
{
init();
smanPromptList(arrList,"Text1");//在這裡添加控制項的ID即可
smanPromptList(arrList,"Text2");//在這裡添加控制項的ID即可
smanPromptList(arrList,"Text3");//在這裡添加控制項的ID即可
}

以上的代碼錶示text1,text2,text3三個文字框同時實現輸入提示.

增加一個函數.
function dropalert()
{
init();
smanPromptList(arrList,"Text1");//在這裡添加控制項的ID即可
smanPromptList(arrList,"Text2");//在這裡添加控制項的ID即可
smanPromptList(arrList,"Text3");//在這裡添加控制項的ID即可
}

以上的代碼錶示text1,text2,text3三個文字框同時實現輸入提示.

在html中寫法如下
<body onload="dropalert()">
<input type="text" id="Text1" >
<input type="text" id="Text2" >
<input type="text" id="Text3" >
</body>