javascript 文本下拉提示

爱被打了一巴掌 2022-08-06 00:11 191阅读 0赞

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <head>
        <title>下拉提示框</title>
    <script>
    var keyWords=['突然好想你','下个，路口，见','在树上唱歌','恋爱ing','坐在巷口的那对男女','不潮不用花钱 ','tears in heaven ','thank you for hearing me','你是用心写的'];
     window.οnlοad=function(){
    
    
        var oText=document.getElementById('txt');
        var oAtuoContent=document.getElementById('atuoContent');
        var now=-1;//表示当前被选中的
        oText.οnkeyup=function(event){//响应每次按键弹起事件   
           event=event?event:window.event;
           var key=oText.value; //只对文本框中的keyup事件有作用。
           oAtuoContent.innerHTML=null;
           if(key.length!=0){
           var oUl=document.createElement("ul");
          for(var i=0;i<keyWords.length;i++){
          if((keyWords[i].indexOf(trim(key)))!=-1){
                var oLi=document.createElement("li");
                var oP=document.createElement('p');
               oP.innerHTML=keyWords[i];
                oLi.appendChild(oP);
             oUl.appendChild(oLi);
          }
     }
     oAtuoContent.appendChild(oUl);
        var aftLi=oAtuoContent.getElementsByTagName('ul')[0].getElementsByTagName('li');
           //如果长度为大于则显示下拉提示框
        	if(aftLi.length>0){
    for(var j=0;j<aftLi.length;j++){
     var oldColor=aftLi[j].style.background;
                    aftLi[j].index=j;
                      //加上onclick事件,单击选中文本,这种方式可以为一个元素绑定多个事件。
        aftLi[j].addEventListener('click',function(){
     var val=this.innerHTML;
                       val=val.substring(3,val.lastIndexOf('<'));
         oText.value=val;
          oAtuoContent.style.display='none';
         },false);
         //加上onmouseover与onmouseout事件
                    aftLi[j].addEventListener('mouseover',function(){
                      now=this.index;
                      for(var k=0;k<aftLi.length;k++){
                        if(this.index==k){
                           aftLi[k].style.background='#2B99FF';  
                         }else{
                          aftLi[k].style.background='';  
                         }
                      }
                    },false);
       }
                 oAtuoContent.style.display='block';
         }else{
            oAtuoContent.style.display='none';
            }
           }else{
               oAtuoContent.style.display='none';
           }
        } 
         //======================添加鼠标上下按键事件===================================
         document.addEventListener('keyup',function(event){
             if(oAtuoContent.innerHTML.length!=0){
                 var oUl=oAtuoContent.getElementsByTagName('ul')[0];
                 var oLi=oUl.getElementsByTagName('li');
                 event =event?event:window.event;
                 //console.log(now);
                 var keycode=event.keyCode;
                  if(keycode == 40)
                   {
                      now=now+1;
                    if(now==0){
                        oLi[now].style.background='#2B99FF';
                    }else if(now>0 && now<oLi.length){
                        var oldr=oLi[now].style.background;
                        oLi[now].style.background='#2B99FF';
                        oLi[now-1].style.background=oldr;
                    }
                    if(now>=oLi.length-1){
                         now=oLi.length-1;
                         oLi[now].style.background='#2B99FF';
                    }
                  }else if(keycode == 38){
                     now=now-1;
                        if(now<0){
                          now=0;
                          oLi[now].style.background='#2B99FF';
                        }else{
                           oLi[now+1].style.background=oLi[now].style.background;
                        
                           oLi[now].style.background='#2B99FF';
                        }
                  }
               }
         },false);
     };
     //去掉空格 
     function trim(str){
        return str.replace(/(^\s+)|(\s+$)/g, "");
     }
    </script>
    <style type="text/css">
    * { margin: 0px; padding: 0px; list-style-type: none;}
    #div1{position: absolute;margin:70px 300px;}
    #div1 h2{font-size: 16px;color: #36C;height: 30px;}
    #div1 #txt{width: 450px; height: 30px;font: 16px arial;border: 1px solid #9A9A9A9A;}
    #div1 #btn1{width: 120px;height: 35px;}
    #atuoContent{width: 430px; border: 1px solid black;position: absolute;margin:132px 300px;display: none;}
    #atuoContent ul{}
    #atuoContent ul li{font-size: 16px;line-height: 30px;}
    </style>
    </head>
    <body>
    <div id="div1">
            <h2>自动提示搜索框</h2>
        <input type="text" id="txt" name="condition"> <input type="button" value="搜索" id="btn1" /> 
    </div>
    <div id="atuoContent"></div>
    </body>
    </html>

![Center][]

[Center]: /images/20220806/b769cacb1eb94c17936d0831465295ef.png