简单自动补全（js+css）

来源：互联网发布：nginx tcp代理编辑：程序博客网时间：2024/04/29 11:44

<%@ 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">

<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.onload=function(){
//找到input框
var keyboxDom=document.getElementById("keybox");
//找到自动提示框
var autoDom=document.getElementById("autoBox");
//找到数据框
var ulDom=document.getElementById("ulBox");
/*
键盘事件中：
onkeydown：按下去的时候事件
onkeyup:抬起来的时候执行的事件
onkeypress:离开的时候

*/
keyboxDom.onkeydown=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 onclick='select(this);'>" +value+arr[i]+"</li>";

}
return html;

};
autoDom.onmouseleave=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>

0 0