搜索功能java代码_简单的搜索框代码实现
简单的搜索框页⾯功能的实现(代码如下)
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+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==""||st(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");
//清空原有数据
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添加颜⾊
html代码转链接$("#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"); }
}
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。