简单的搜索框页面功能的实现(代码如下)
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
My JSP 'search.jsp' starting page
//声明计数变量
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
dataDiv.append("
"+sd[i].title+"");
}
//给提示框中的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").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");
}
}
});
});
