百度提示框实现-优快云博客

本文链接：https://blog.youkuaiyun.com/typeofstring/article/details/77454093

<%@ 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>
</body>
</html>