<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{
font-size:0.75em;
border:0;
margin:250px 0 0 0;
padding:0;
}
#content{
width:450px;
margin:auto;}
#key{
width:300px;
margin:0;
padding:4px 0 0 5px;
}
.key_abnormal{
border-bottom:1px solid white;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
.key_normal{
border-bottom:1px solid #8298BF;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
#search_suggest{
margin:0;
padding:0;
width:300px;
height:auto;
border:1px solid black;
}
.suggest_hidden{
display:none;
}
.item_normal{
width:100%;
overflow:hidden;
padding-left:5px;
padding-top:2px;}
.item_high{
padding-left:5px;
padding-top:2px;
background-color:#326BC5;
color:white;}
</style>
<script type="text/javascript">
var array;
var xhttp;
var zz=-1; //此为指针
//函数生成下拉列表
function buildList(){
zz=-1;
document.getElementById("search_suggest").innerHTML="";
for(var i=0;i<array.length-1;i++){
if(array!=""){
document.getElementById("search_suggest").innerHTML+="<div id='item" + i +
"' class='item_normal' οnmοuseοver='beMouseOver(" + i +
")' οnmοuseοut='beMouseOut(" + i + ")' οnclick='beClick(" + i +
")'>" + array + "</div>";
}
}//for循环
}//函数
//函数鼠标经过效果
function beMouseOverEFF(i){
if ((i>=0)&(i<array.length-1)){
document.getElementById("item" + i).className="item_high";
}
}
//函数鼠标移开效果
function beMouseOutEFF(i){
if ((i>=0)&(i<array.length-1)){
document.getElementById("item" + i).className="item_normal";
}
}
//函数鼠标经过
function beMouseOver(i){
document.getElementById("key").focus();
beMouseOutEFF(zz);
zz=i;
beMouseOverEFF(zz);
}
//函数鼠标移开
function beMouseOut(i){
}
//函数单击
function beClick(i){
document.getElementById("key").value=array;
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
}
//方向键接收函数
function beKeyDown(){
//往下按
if (event.keyCode==40){
if(zz<array.length-2){
beMouseOutEFF(zz++);
}
if(zz<=array.length-1){
beMouseOverEFF(zz);
}
}
//往上按
if (event.keyCode==38){
if (zz>0){
beMouseOutEFF(zz--);
}
if (zz>=0){
beMouseOverEFF(zz);
}
}
//按回车或者TAB
if (event.keyCode==13||event.keyCode==9){
if (zz!=-1){
beClick(zz);
}
else
{
document.getElementById("search_button").focus();
}
}
}
//beKeyUp事件。与服务器通信
function beKeyUp(){
if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40){
if (document.getElementById("key").value.length>0){
mySearch();
}
}
}
//与服务器通迅
function mySearch(){
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
xhttp.onreadystatechange=fun1;
xhttp.open("POST", "search.do", true);
//设置要发送的数据的格式.
xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送数据.
var str = escape(document.getElementById('key').value);
xhttp.send("str="+str+"&o=search");
}
function fun1()
{
array=new Array();
if (xhttp.readyState==4){
if (xhttp.status == 200){
str1=xhttp.responseText.split("|");
if(str1!=null && str1!=""){
for(i=0;i<array.length;i++){
array="";
}
for(i=0;i<str1.length;i++){
array=str1;
}
if (array.length>0)
{
buildList();
document.getElementById("key").className="key_abnormal";
document.getElementById("search_suggest").className="search_suggest";
}
}else{
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
}
}
}
}
function beOnBlur(){
}
</script>
</head>
<body>
<div id="content">
<div id="search_input">
<input id="key" type="text" name="key" class="key_normal" οnkeydοwn="beKeyDown();" οnkeyup="beKeyUp();" οnblur="beOnBlur();" />
<input type="button" name="search_button" id="search_button" value="搜索/进入" />
</div>
<div id="search_suggest" class="suggest_hidden">
</div>
</div>
<div id="ttt"></div>
</body>
</html>
-----------------上面是前台JSP页面和CSS样式-------------------------------
-----------------以下是后台代码-----------------------------
public ActionForward search(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String str = request.getParameter("str");
List list = searchBiz.ajaxSearch(str);
StringBuffer result=new StringBuffer();
if(list.size()>0){
for(int i=0;i<list.size();i++){
result.append(list.get(i).toString()+"|");
}
}else{
result=null;
}
try {
response.setContentType("text/html");
response.setCharacterEncoding("gb2312");
PrintWriter out=response.getWriter();//该语句必须在setCharacterEncoding("gb2312")之后.
if(result!=null){
out.println(result.toString());
}
out.flush();//刷流,将服务器端数据强制发送到客户端.否则服务器会进行缓存.
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{
font-size:0.75em;
border:0;
margin:250px 0 0 0;
padding:0;
}
#content{
width:450px;
margin:auto;}
#key{
width:300px;
margin:0;
padding:4px 0 0 5px;
}
.key_abnormal{
border-bottom:1px solid white;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
.key_normal{
border-bottom:1px solid #8298BF;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
#search_suggest{
margin:0;
padding:0;
width:300px;
height:auto;
border:1px solid black;
}
.suggest_hidden{
display:none;
}
.item_normal{
width:100%;
overflow:hidden;
padding-left:5px;
padding-top:2px;}
.item_high{
padding-left:5px;
padding-top:2px;
background-color:#326BC5;
color:white;}
</style>
<script type="text/javascript">
var array;
var xhttp;
var zz=-1; //此为指针
//函数生成下拉列表
function buildList(){
zz=-1;
document.getElementById("search_suggest").innerHTML="";
for(var i=0;i<array.length-1;i++){
if(array!=""){
document.getElementById("search_suggest").innerHTML+="<div id='item" + i +
"' class='item_normal' οnmοuseοver='beMouseOver(" + i +
")' οnmοuseοut='beMouseOut(" + i + ")' οnclick='beClick(" + i +
")'>" + array + "</div>";
}
}//for循环
}//函数
//函数鼠标经过效果
function beMouseOverEFF(i){
if ((i>=0)&(i<array.length-1)){
document.getElementById("item" + i).className="item_high";
}
}
//函数鼠标移开效果
function beMouseOutEFF(i){
if ((i>=0)&(i<array.length-1)){
document.getElementById("item" + i).className="item_normal";
}
}
//函数鼠标经过
function beMouseOver(i){
document.getElementById("key").focus();
beMouseOutEFF(zz);
zz=i;
beMouseOverEFF(zz);
}
//函数鼠标移开
function beMouseOut(i){
}
//函数单击
function beClick(i){
document.getElementById("key").value=array;
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
}
//方向键接收函数
function beKeyDown(){
//往下按
if (event.keyCode==40){
if(zz<array.length-2){
beMouseOutEFF(zz++);
}
if(zz<=array.length-1){
beMouseOverEFF(zz);
}
}
//往上按
if (event.keyCode==38){
if (zz>0){
beMouseOutEFF(zz--);
}
if (zz>=0){
beMouseOverEFF(zz);
}
}
//按回车或者TAB
if (event.keyCode==13||event.keyCode==9){
if (zz!=-1){
beClick(zz);
}
else
{
document.getElementById("search_button").focus();
}
}
}
//beKeyUp事件。与服务器通信
function beKeyUp(){
if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40){
if (document.getElementById("key").value.length>0){
mySearch();
}
}
}
//与服务器通迅
function mySearch(){
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
xhttp.onreadystatechange=fun1;
xhttp.open("POST", "search.do", true);
//设置要发送的数据的格式.
xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送数据.
var str = escape(document.getElementById('key').value);
xhttp.send("str="+str+"&o=search");
}
function fun1()
{
array=new Array();
if (xhttp.readyState==4){
if (xhttp.status == 200){
str1=xhttp.responseText.split("|");
if(str1!=null && str1!=""){
for(i=0;i<array.length;i++){
array="";
}
for(i=0;i<str1.length;i++){
array=str1;
}
if (array.length>0)
{
buildList();
document.getElementById("key").className="key_abnormal";
document.getElementById("search_suggest").className="search_suggest";
}
}else{
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
}
}
}
}
function beOnBlur(){
}
</script>
</head>
<body>
<div id="content">
<div id="search_input">
<input id="key" type="text" name="key" class="key_normal" οnkeydοwn="beKeyDown();" οnkeyup="beKeyUp();" οnblur="beOnBlur();" />
<input type="button" name="search_button" id="search_button" value="搜索/进入" />
</div>
<div id="search_suggest" class="suggest_hidden">
</div>
</div>
<div id="ttt"></div>
</body>
</html>
-----------------上面是前台JSP页面和CSS样式-------------------------------
-----------------以下是后台代码-----------------------------
public ActionForward search(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String str = request.getParameter("str");
List list = searchBiz.ajaxSearch(str);
StringBuffer result=new StringBuffer();
if(list.size()>0){
for(int i=0;i<list.size();i++){
result.append(list.get(i).toString()+"|");
}
}else{
result=null;
}
try {
response.setContentType("text/html");
response.setCharacterEncoding("gb2312");
PrintWriter out=response.getWriter();//该语句必须在setCharacterEncoding("gb2312")之后.
if(result!=null){
out.println(result.toString());
}
out.flush();//刷流,将服务器端数据强制发送到客户端.否则服务器会进行缓存.
} catch (Exception e) {
e.printStackTrace();
}
return null;
}