input框提示js,类似GOOGLE,可以做成动态的

< 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 test() {
    init();
    smanPromptList(arrList,
" aspx " )
    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).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;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 " >
 改来改去还是只能用于一个文本框的下拉提示
</ font >

如果是两个的话就不能出来提示了呀。。。
< br >
< input type = " text "  id = " aspx " >< br >

< input type = " text "  id = " aspx2 " >< br >

多个文本框的下拉提示 还是没实现,
我的JS不好还请大家帮帮看看。我想

< font color = " red "   >
实现多个文本框都能下拉提示 怎么办啊。。。
< br >
</ font >  

你可能感兴趣的:(JavaScript,.net,Google,IE)