javascript 文本下拉提示_前端纯js写一个弹出框,其中带下拉选择框和提示文字-优快云博客

本文链接：https://blog.youkuaiyun.com/angjunqiang/article/details/41730677
<!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>