仿百度ajax搜索提示（jsp）

最新推荐文章于 2024-07-25 19:01:22 发布

qns280

最新推荐文章于 2024-07-25 19:01:22 发布

阅读量1.6k

点赞数

文章标签： ajax 百度 search function button stylesheet

本文链接：https://blog.csdn.net/qns280/article/details/5623078

版权

<%@ 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">

  <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;
}

qns280

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
仿百度ajax搜索提示（jsp）

index --> body{ font-size:0.75em; border:0; margin:250px 0 0 0; padding:0; } #content{ width:450px; margin:auto;} #key{ width:300px; margin:0
复制链接

扫一扫