仿 google baidu 自动提示框

最新推荐文章于 2024-09-02 17:34:07 发布

ycm163

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量735

点赞数 1

文章标签： google function div javascript border ajax

本文链接：https://blog.csdn.net/ycm163/article/details/5301324

版权

以下是仿google自动提示框没用ajax而是将内容放在js数组中，还有待完善，不过一可以使用，望大家指教

------------------------------------------------------start-----------------------------------------------------------------------------------

<html>
<head>
<style>
.back{ background:#000099;color:#FFFFFF}

</style>
<script type="text/javascript">
   var a=[];
   a[0]='你a好';
   a[1]='你好a你好你好你好';
   a[2]='adfdf';
   a[3]='ddsds';
   a[4]='六人a行';
   a[5]='六人a行script';
   a[6]='javascript';
   a[7]='税务';
   a[8]='js 双击事件';
    sz='';//存储符合条件的字符
    function style1(obj){
     obj.className='back';
}
function style2(obj){
     obj.className='';
}
   function s(){//输入框发生变化时触发该事件
       if(mytest.value==''){//如果输入内容为空则不显示
         hidder();
         text.innerHTML='';
         return ;
       }
       sz='';
    var ishidden=false;
      for(var i=0;i<a.length;i++){ //搜索符合条件的文本
        if(a[i].indexOf(mytest.value)>-1){
           ishidden=true;//符合条件时，将提示框开关打开
           sz+="<div οnclick='getValue(this)'onMouseOut='style2(this)' οnmοuseοver='style1(this)'>"+a[i]+"</div>";
        }
      }
   if(ishidden){//没有符合条件的将隐藏提示框
      text.style.display='';
   }else{
     text.style.display='none';
   }
       text.innerHTML=sz;
   }
   //将提示框中的赋值给输入框隐藏提示框
   function getValue(o){
      index=-1;//将提示框中的索引号重置
      mytest.value=o.innerHTML;
       text.style.display='none'
    }
   function hidder(){
     text.style.display='none'
   }
   var index=-1;
   var _index=0;
   function showsytle(){
      var d=text.getElementsByTagName("div");

    if(event.keyCode==40){//方向键下
       if(d.length==index+1){ return;}
    index++;
    if(index==0){
       d[index].className='back';
    _index=index;
    return
    }
    if(index>0){ d[index-1].className='';}

    _index=index;
    d[_index].className='back';
    }

    if(event.keyCode==38){//方向键上
      if(index==0){ return; }
      _index=index-1;
      d[_index].className='back';
     d[index].className='';
     index--;

    }
    if(event.keyCode==13){//回车键，将文字显示到输入框，并隐藏提示框
   getValue(d[_index])
    }
}
   function keycode(){//焦点由输入框转移到提示框并显示第一个数据条目

      if(event.keyCode==40){
      index=-1;
      text.focus();
   showsytle();
   }
   }
</script>
</head>
<body>
<div style="width:300;height:200;" >
     <input type="text" id="mytest" onKeyUp="keycode()" onpropertychange="s()"/><br/>
<div id="text" onKeyUp="showsytle()" style="position:relative;top:-1px;cursor:hand;display:none;width:200;height:100; border: solid #CCCCCC 1px"> </div>

</div>
</body>
</html>
-------------------------------------------------end--------------------------------------------------------------------------------

ycm163

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
仿 google baidu 自动提示框

以下是仿google自动提示框没用ajax而是将内容放在js数组中，还有待完善，不过一可以使用，望大家指教------------------------------------------------------start-----------------------------------------------------------------------------------
复制链接

扫一扫