![45d344f8085c87bea8590f4716f0f159.png](https://i-blog.csdnimg.cn/blog_migrate/3d38ccd8d27563798aad34cfd528a046.jpeg)
简单的搜索框页面功能的实现(代码如下)
<%@ 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 'search.jsp' starting page</title>
<!-- 引入jQuery文件 -->
<script type="text/javascript" src = "js/j.js"></script>
<!-- 声明js代码域 -->
<script type="text/javascript">
//声明计数变量
var count=-1;
//声明变量记录定时执行的编码
var id;
//页面加载成功时完成页面资源的初始化
$(function(){
//给搜索框添加键盘弹起事件
$("#search").keyup(function(event){
//声明正则表达式判断空格
var reg = /^s+$/g;
//获取event对象
var eve = window.event||event;
//获取用户当前点击的键盘键的键盘值
var code = eve.keyCode;
if((code>=65&&code<=90)||code==8 ||code==32){
//获取当前搜索框中的数据
var sd = $("#search").val();
if(sd==""||reg.test(sd)){
return;
}
//清除之前将要发送的请求数据
window.clearTimeout(id);
//设置请求延迟发送
id =window.setTimeout(function(){
//发起ajax请求,请求当前用户搜索框数据的提示信息
$.get("search",{sdata:sd},function(data){
//转成js对象
eval("var sd="+data);
//将获取到的数据插入到提示框的div中
//获取提示框对象
var dataDiv = $("#dataDiv");
//清空原有数据
dataDiv.empty();
if(sd.length>0){
//显示div
dataDiv.css("display","");
}
//遍历
for(var i=0;i<sd.length;i++){
dataDiv.append("<div style='padding:5px;'>"+sd[i].title+"</div>");
}
//给提示框中的div增加鼠标选择的效果
$("#dataDiv div").mouseover(function(){
//清空提示框中div的颜色
$("#dataDiv div").css("background-color","");
//给鼠标悬停的div增加颜色
$(this).css("background-color","gray");
//实现鼠标和键盘的联动
count = $(this).index();
});
//给提示框中的div增加单击事件,用来选择提示语
$("#dataDiv div").click(function(){
$("#search").val($(this).html());
//当单击选择完后,提示框的div隐藏
$("#dataDiv").css("display","none");
});
});
},500);
}
//判断用户点击的是否是键盘的下键
if(code==40){
//判断是否有提示语
if($("#dataDiv div").length>0){
count =(count<$("#dataDiv div").length-1?++count:0);
//清空原有样式
$("#dataDiv div").css("background-color","");
//给下键选择的div添加颜色
$("#dataDiv div:eq("+count+")").css("background-color","gray");
}
}
//判断用户点击的是否是键盘的上键
if(code==38){
//判断是否有提示语
if($("#dataDiv div").length>0){
count =(count>0?--count:$("#dataDiv div").length-1);
//清空原有样式
$("#dataDiv div").css("background-color","");
//给下键选择的div添加颜色
$("#dataDiv div:eq("+count+")").css("background-color","gray");
}
}
});
});
</script>
</head>
<body>
<!-- 添加一个大的div容器使搜索框div和提示框div在一起 -->
<div id="container" style="width: 450px;margin: auto;">
<!-- 搜索框的div -->
<div id="sdiv" style="width: 450px; margin: auto;margin-top: 160px;">
<input type="text" name="search" id="search" value="" style="width: 300px;height: 30px;font-size: 16px;"/>
<input type="button" value="搜索" style="width: 50px;height: 30px"/>
</div>
<!-- 提示框的div -->
<div id="dataDiv" style="width: 298px;height: 250px; border: 1px solid;border-top: none; display: none;"></div>
</div>
</body>
</html>