String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
搜索框
//创建计数器var count = -1;
//声明变量记录var id;
//页面加载成功完成页面的初始化$(function() {
//给搜索框添加键盘弹起事件$("#search").keyup(
function(event) {///火狐方式获取对象var reg=/^\s+$/g;
//获取event对象var eve = window.event||event;
//获取用户当前点击的键盘架的键盘值var code = eve.keyCode;
//判断code的值是否符合要求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) {
//使用eval方法将数据转换为对象eval("var sd=" + data);
//获取提示语div元素对象var dataDiv = $("#dataDiv");
//请客所有内容dataDiv.empty();
//显示隐藏的divif(sd.length>0){
dataDiv.css("display", "")
}else{
dataDiv.css("display", "none")
}
//将提示语数据填充到div中for (var i = 0; i < sd.length; i++) {
dataDiv.append("
"
+ sd[i].title + "
");
}
//给提示与添加鼠标选择效果$("#dataDiv div").mouseover(function() {
//清空所有提示语的div的背景颜色$("#dataDiv div").css("background-color", "");
//将当前选择的div背景颜色变为灰色$(this).css("background-color", "gray");
//count=$(this).index();
})
//给提示语div添加单击事件，用来选择提示语$("#dataDiv div").click(function() {
//将当前div的提示语数据改变到搜索框内$("#search").val($(this).html());
//隐藏当前填充所有提示语的div$("#dataDiv").css("display", "none");
})
})
},1000);
}
//判断用户点击的是否是键盘的下键if (code == 40) {
//判断是否与提示语if (("#dataDiv div").length > 0) {
//判断count=count
//清空原有颜色$("#dataDiv div").css("background-color", "");
//让提示语div中第一个提示语的背景色变为灰色$("#dataDiv div:eq(" + count + ")").css(
"background-color", "gray");
//将选择的提示语改变到搜索框中$("#search").val($("#dataDiv div:eq(" + count + ")").html());
}
}
//判断用户点击的是否是键盘的上键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");
//将选择的提示语改变到搜索框中$("#search").val($("#dataDiv div:eq(" + count + ")").html());
}
}
})
})
style="width: 400px; height: 30px; font-size: 20px" />
type="button" value="搜索" style="width: 90px; height: 35px" />
style="width: 402px; height: 300px; border: solid 1px; border-top: none;display: none;" >
