<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>



 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <base href="<%=basePath%>">

     

     <title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

<style >

 *{padding:0;margin:0}

 a{text-decoration:none;color:#333}

 ul,li{list-stytle:none}

 body{font-size:12px;font-family:"微软雅黑"}

/*设置背景*/

 .bg{

   background:url("images/bg.jpg") no-repeat fixed;/*不允许重叠*/

   position:absolute;/*随着浏览器缩小图片改变*/

   top:0;

   left:0;

   width:100%;

   height:100%;

   background-size:cover;/*防止产生空白边框*/

   z-index:-1;

 }

 #container{width:640px;height:70px;margin:300px auto}

 .inputs{width:560px;height:45px;border:0;float:left;text-indent:1em;font-family:"微软雅黑"

 box-shadow:inset 0 0 1em #ccc/*文本框内层阴影*/

 }

 .btn_search{height:45px;background:#fff;display:inline-block;float:left;width:77px;text-align:center;line-height:45px;

 border-left:1px solid #ccc;font-size:16px;}

 .searbox{border:1px solid #ccc;height:45px;}

/*解决搜索框和按钮的1px的差别的方案*/

/*1.将input的边框设置为0或none*/

/*2.将a按钮设置成为display:inline-block,设置高度和宽度*/

/*3.给外层增加边框即可*/

 #autoBox {display:none}

 #autoBox li{height:35px;border-bottom:1px solid #ccc;line-height:35px;padding-left:5px;font-size:12px;}

 #autoBox li:hover{background:#eaeaea}

 

</style>

   </head>

   

 <body  style="background:#111">

 <!-- 设置背景 -->

  <div class="bg" ></div>

      <!-- 搜索框 -->

      <div   id="container">

           <div class="searbox"> <input type="text" class="inputs" id="keybox"/><a href="#" class="btn_search">搜索</a></div>

           <div id="autoBox"> 

        <!-- 找到数据框 --> 

          <ul id="ulBox">

              

           

          </ul>

           

           </div>

      

      </div>

        

<script type="text/javascript">

/*自动补全                      

1.输入关键字的时候产生一个div层

        触发键盘事件

2.层中就是产生的数据

 


*/

window.οnlοad=function(){

 //找到input框

  var keyboxDom=document.getElementById("keybox");

 //找到自动提示框 

  var autoDom=document.getElementById("autoBox");

   //找到数据框 

  var ulDom=document.getElementById("ulBox");

/*

键盘事件中：

onkeydown：按下去的时候事件

onkeyup:抬起来的时候执行的事件

onkeypress:离开的时候


*/

keyboxDom.οnkeydοwn=function(){

//拿到input宽度和高度

var inputwidth=this.offsetWidth;

var inputheight=this.offsetHeight;


/* autoDom.style.display="block";

autoDom.style.width=inputwidth+"px";

autoDom.style.height=(inputheight+200)+"px";

autoDom.style.marginTop="1px";

autoDom.style.background="#f9f9f9";*/

//1.输入@时显示提示框

var value=this.value;

if(value.indexOf("@")!=-1){

css(autoDom,{

   display:"block",

   width:inputwidth,

   height:inputheight+200,

   marginLeft:1,

   padding:10,

   border:"1px solid red ",

   background:"#f9f9f9"

});

//2.如何拼接数据

var html= getMailHTML(value);  

ulDom.innerHTML=html;

//3.如何选择产生的数据---绑定事件

 

};



};

function getMailHTML(value){

var arr=["163.com","sina.com","gmail.com","sohu.com","qq.com"];

var html="";

for(var i=0;i<arr.length;i++){

   html+="<li οnclick='select(this);'>" +value+arr[i]+"</li>";


}

return html;


};

autoDom.οnmοuseleave=function(){

this.style.display="none";



};

//实现了jquery中的css方法

function css(dom,opts){

   for(var key in opts){

    var v=opts[key];

    if(typeof v == "number")

    {

   
 v +="px";

    }

       dom["style"][key]=v;

   }


}


};


//选中事件

function select(obj){

  

document.getElementById("keybox").value=obj.innerHTML;



};



</script> 

 </body>

 </html>