<%@ 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>百度提示框</title>
<style type="text/css">
#divkeywords{
border: solid 2px red;
width: 250px;
height: 25px;
}
#keywordid{
border: none;
outline: none;
font-size: 20px;
}
#divappend{
border: solid 2px red;
width: 250px;
border-top: none;
display: none;
}
.backcolor{
background: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js" charset="utf-8"></script>
<script type="text/javascript">
//当页面加载完成给页面添加键盘按下去就触发的事件
//event全局事件对象
$(function(){
$(document).keydown(function(event){
var eve = event||window.event;
//keyCode: 38-向上的箭头 40-向下的箭头 13-回车enter
//alert(eve.keyCode);
if(eve.keyCode==38){//背景颜色向上移动
//使input失去焦点
$("#keywordid").blur();
//判断divappend对象中是否有html
if($("#divappend").html()==""){
return;
}
//向上移动
//prevAll()：查找当前元素之前所有的同辈元素
var varbg = $(".backcolor").prevAll().length;
//判断是否有背景颜色
if(varbg==0){
//删除背景颜色
$(".item").removeClass("backcolor");
//添加背景颜色 eq:同过下标来获取元素的对象
$(".item").eq($(".item").length-1).addClass("backcolor");
}else{
//删除背景颜色
$(".item").removeClass("backcolor");
//添加背景颜色
$(".item").eq(varbg-1).addClass("backcolor");
}
}else if(eve.keyCode==40){//背景颜色向下移动
//使input失去焦点
$("#keywordid").blur();
//判断divappend对象中是否有html
if($("#divappend").html()==""){
return;
}
//判断是否有背景颜色
if($(".item").hasClass("backcolor")){
//prevAll()：查找当前元素之前所有的同辈元素
var varbg = $(".backcolor").prevAll().length;
//判断背景是否移动到最后一个元素
if(varbg==$(".item").length-1){
//删除背景颜色,再添加背景颜色
$(".item").removeClass("backcolor").eq(0).addClass("backcolor");
}else{
//删除背景颜色,再添加背景颜色
$(".item").removeClass("backcolor").eq(varbg+1).addClass("backcolor");
}
}else{
//删除背景颜色,再添加背景颜色
$(".item").removeClass("backcolor").eq(0).addClass("backcolor");
}
}else if(eve.keyCode==13){//回车--把带背景颜色的文本内容显示到input输入框中
//获取对象
$("#keywordid").val($(".backcolor").text());
//隐藏divappend,并且删除divappend里面的html
$("#divappend").hide().html("");
}
});
});
//当鼠标移动时触发的事件，给div添加背景颜色
function addcolor(obj){
//移除样式
$(".item").removeClass("backcolor");
//把当前对象添加样式
$(obj).addClass("backcolor");
//获取对象
$("#keywordid").val($(".backcolor").text());
//隐藏divappend,并且删除divappend里面的html
}
//移除div
function removediv(){
//隐藏divappend,并且删除divappend里面的html
$("#divappend").hide().html("");
}
//百度提示框
function baidusuggest() {
//获取divappend对象
var vardivappend = $("#divappend");
//1:获取输入框里面的内容发送给后台服务器查询相关数据
var varval = $("#keywordid").val();
var valtrim = $.trim(varval);//去掉输入框内容的首尾空格
if(valtrim.length>0){
//alert(valtrim+"--"+valtrim.length);
//用jquery发送ajax
$.post("BaiduSuggest",{keyword:valtrim},function(result){
//判断长度是否大于0
if(result.length>0){
//alert(result);
//把数组类型的字符串转成数组
var vararray = JSON.parse(result);
//声明一个htmls
var htmls = "";
//遍历数组获取元素的值
for (var i = 0; i < vararray.length; i++) {
if(i<5){
htmls += "<div class='item' οnmοuseenter='addcolor(this)' οnclick='removediv()' >"+vararray[i]+" </div>";
}
}
//先显示div，再给div里面添加html
vardivappend.show().html(htmls);
}else{
//alert("获取不到数据");
//隐藏divappend,并且删除divappend里面的html
vardivappend.hide().html("");
return;
}
});
}else{
//alert("空");
//隐藏divappend,并且删除divappend里面的html
vardivappend.hide().html("");
return;
}
}
</script>
</head>
<body>
<div id="div01">
<div id="divkeywords"><input type="text" name="keyword" id="keywordid" value="" οnkeyup="baidusuggest();"/> </div>
<div id="divappend">
<!-- <div>张三 </div>
<div>张三1 </div>
<div>张三2 </div>
<div>张三3 </div> -->
</div>
</div>
</body>
</html>
写一个百度提示框
1.导入jquery，
画框：显示文本，显示内容
2.设置样式：
border:solid 1px red ;
width:200px ;
height:23px ;
.backcolor{
background-color:red;
}
3.写一个输入框
<div>
<div id="keywordid" type="text" name="keywrod" οnkeyup="baidusuggest();">
</div>
4.下下拉框
<div id="divappend">
<div class='classdiv'>1111</div>
<div>1222</div>
</div>
5.function baidusuggest(){
//1.获取输入框的值
var varval = $("#keywordid").val();
//2.去掉空格
var valtrim = $.trim(varval);
//测试
if(vartrim.length>0){
alert(valtrim+"--"+valtrim.length());
}else{
alert("空");
}
}
6.servlet:
1.处理乱码
2.获取参数
3.判断
if(keyword!=null&&!"".equals(keyword)){
//创建集合list
//通过name like 查询学生表
"select * from t_student where name like ?"
//
ps.setString(1,"%"+name+"%");
//
}
7.处理细节：
查询处理就显示show()，然后隐藏hide(),删除就清空内容.html("");
获取数据显示就用html拼接的方式 html += "";
8.当网页加载完成给页添加一个键盘按下的触发事件用event
$(function (){
$(document).keydown(function(event){
//处理浏览器不兼容的问题
var eve = event||window.event;
//获取箭头的值 38向上 40向下
//背景向上动
if(eve.keycode==38){
//让input输入框失去焦点
//判断如果下拉框不为空再向下执行
//定义一个背景
//特殊情况：没有背景色就添加背景色给最后一个
//有背景色就添加向上处理给上一个添加背景色
//移除背景颜色
//光标到了哪里就给哪个div添加颜色
$(.classdiv).eq(索引).addClass();
//
//
//判断当前的背景颜色的上面有几个兄弟节点prevAll();
}
});
})
背景颜色下移动
if(eve.keycode==40){}
先失去焦点，否则就一直在获取焦点
1.判断是否有背景颜色，backcolor;hasClass("class类名");
有就判断 背景是否在最后一个元素
if(){}
按enter就表示选中的内容：
判断keycode==13：通过event获取
获取内容：通过类选择器获取对象的值
将值放在输入框中：输入框div对象.val(值);
隐藏下拉列表div并删除下拉的html
给鼠标添加滑动效果：onmouseenter:给每个下拉div添加
function addcolor(obj){}
记住：当前对象默认是js对象，需要转为jquery对象
先清除所有的背景色，再给指定对象添加背景
隐藏hide(),并删除内容html();
4.
记住 border : none ;去除边框
outline :none; 去除框线
input 默认会带有边框和框线
border-top:none;去除边框顶部的线
隐藏用display:none;
select下拉框的宽度不好控制就用div
onkeyup 键盘按下的时候就触发
去除输入框的首尾空格
eq==数组，获取元素，通过下标
对象.eq(index)
对象.prevAll();
先移除背景色再进行添加，否则就会给两个添加后
removeClass();
没有背景色就给最后一个添加颜色，通过带这个背景色的对象.prevAll().length判断
addClass添加样式，
获取HTML的值就用 对象.text(),input :val();
代码：
<%@ 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>百度提示框</title> <style type="text/css"> #divkeywords{ border: solid 2px red; width: 250px; height: 25px; } #keywordid{ border: none; outline: none; font-size: 20px; } #divappend{ border: solid 2px red; width: 250px; border-top: none; display: none; } .backcolor{ background: green; } </style> <script type="text/javascript" src="js/jquery-1.9.1.js" charset="utf-8"></script> <script type="text/javascript"> //当页面加载完成给页面添加键盘按下去就触发的事件 //event全局事件对象 $(function(){ $(document).keydown(function(event){ var eve = event||window.event; //keyCode: 38-向上的箭头 40-向下的箭头 13-回车enter //alert(eve.keyCode); if(eve.keyCode==38){//背景颜色向上移动 //使input失去焦点 $("#keywordid").blur(); //判断divappend对象中是否有html if($("#divappend").html()==""){ return; } //向上移动 //prevAll()：查找当前元素之前所有的同辈元素 var varbg = $(".backcolor").prevAll().length; //判断是否有背景颜色 if(varbg==0){ //删除背景颜色 $(".item").removeClass("backcolor"); //添加背景颜色 eq:同过下标来获取元素的对象 $(".item").eq($(".item").length-1).addClass("backcolor"); }else{ //删除背景颜色 $(".item").removeClass("backcolor"); //添加背景颜色 $(".item").eq(varbg-1).addClass("backcolor"); } }else if(eve.keyCode==40){//背景颜色向下移动 //使input失去焦点 $("#keywordid").blur(); //判断divappend对象中是否有html if($("#divappend").html()==""){ return; } //判断是否有背景颜色 if($(".item").hasClass("backcolor")){ //prevAll()：查找当前元素之前所有的同辈元素 var varbg = $(".backcolor").prevAll().length; //判断背景是否移动到最后一个元素 if(varbg==$(".item").length-1){ //删除背景颜色,再添加背景颜色 $(".item").removeClass("backcolor").eq(0).addClass("backcolor"); }else{ //删除背景颜色,再添加背景颜色 $(".item").removeClass("backcolor").eq(varbg+1).addClass("backcolor"); } }else{ //删除背景颜色,再添加背景颜色 $(".item").removeClass("backcolor").eq(0).addClass("backcolor"); } }else if(eve.keyCode==13){//回车--把带背景颜色的文本内容显示到input输入框中 //获取对象 $("#keywordid").val($(".backcolor").text()); //隐藏divappend,并且删除divappend里面的html $("#divappend").hide().html(""); } }); }); //当鼠标移动时触发的事件，给div添加背景颜色 function addcolor(obj){ //移除样式 $(".item").removeClass("backcolor"); //把当前对象添加样式 $(obj).addClass("backcolor"); //获取对象 $("#keywordid").val($(".backcolor").text()); //隐藏divappend,并且删除divappend里面的html } //移除div function removediv(){ //隐藏divappend,并且删除divappend里面的html $("#divappend").hide().html(""); } //百度提示框 function baidusuggest() { //获取divappend对象 var vardivappend = $("#divappend"); //1:获取输入框里面的内容发送给后台服务器查询相关数据 var varval = $("#keywordid").val(); var valtrim = $.trim(varval);//去掉输入框内容的首尾空格 if(valtrim.length>0){ //alert(valtrim+"--"+valtrim.length); //用jquery发送ajax $.post("BaiduSuggest",{keyword:valtrim},function(result){ //判断长度是否大于0 if(result.length>0){ //alert(result); //把数组类型的字符串转成数组 var vararray = JSON.parse(result); //声明一个htmls var htmls = ""; //遍历数组获取元素的值 for (var i = 0; i < vararray.length; i++) { if(i<5){ htmls += "<div class='item' οnmοuseenter='addcolor(this)' οnclick='removediv()' >"+vararray[i]+" </div>"; } } //先显示div，再给div里面添加html vardivappend.show().html(htmls); }else{ //alert("获取不到数据"); //隐藏divappend,并且删除divappend里面的html vardivappend.hide().html(""); return; } }); }else{ //alert("空"); //隐藏divappend,并且删除divappend里面的html vardivappend.hide().html(""); return; } } </script> </head> <body> <div id="div01"> <div id="divkeywords"><input type="text" name="keyword" id="keywordid" value="" οnkeyup="baidusuggest();"/> </div> <div id="divappend"> <!-- <div>张三 </div> <div>张三1 </div> <div>张三2 </div> <div>张三3 </div> --> </div> </div> </body> </html>
