ajax技术实现搜索提示_H5之家 - 中国HTML5教程资源分享第一站

其他回答 (1)

果果 2010-08-13

struts2 action 代码

import java.io.IOException;
import java.io.PrintWriter;

public class AutoComplete extends CommonAction {

/**
* 用于实践ajax google 的样式
* 用于接收服务器端请求的
*/
//抓取从页面穿过来的字符串用于和服务器端的单词进行匹配
private String word ;

public AutoComplete() {
}

public String onblurquery() throws Exception{
  //保存要查询的东西
  //注意ajax 中这个所谓的视图层不返回页面只返回数据
  this.getRequestMap().put("word", word);
  //System.out.println("struts - > "+word);
  this.getResponse().setContentType("text/xml;charset=gb2312;");
  return "toshow";
}

public String getWord() {
  return word;
}

public void setWord(String word) {
this.word = word;
}

}

jsp 代码

<%@ page contentType="text/html; charset=gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>google</title>

<meta http-equiv="description" content="This is my page">
<style type="text/css">
  /*当文本没有被选中的时候就使用这个样式*/
  .auto-1{
   background-color: #FFCC99;
   color: gray;
   cursor: pointer;
   width: 100%;
  }
  /*当文本被选中的时候就是用这个样式*/
  .auto-2{
   background-color: #CCFF99;
   color: green;
   cursor: pointer;
   width: 100%;
  }
</style>

<script type="text/javascript" src="employees/jquery.js"></script>
<script type="text/javascript" src="employees/auto.js"></script>

</head>

<body>
    google:
    <input type="text">
    <input type="button" value="查询"><br>
    <div></div>
</body>
</html>

jquery 代码

  //表示当前被选中的节点
  var highlightindex = -1;
  var timeoutId;
  $(document).ready(function (){
  //alert("准备好了");
  //保存文本输入框
   var wordinput=$("#word");
   //保存文本的
   var wordinputOffset = wordinput.offset();
   //弹出框应该等于在文本的下面那么就是文本的宽等于div的宽
   $("#auto").hide().css("border","1px solid #CDD2CB").css("position","absolute")
   .css("top",wordinputOffset.top+wordinput.height()+5+"px").css("left",wordinputOffset.left+"px").width(wordinput.width()+40+"px");
   //给文本框添加键盘按下并谈起的实践
   $("#word").keyup(function (event){
    //处理键盘实践
    var myEvent = event || window.event;
    //如果输入的是字母应该是将文本中最新的信息发送到服务器
    //如果是退格或是删除键那么就将文本中最新的信息发送给服务器
    var keyCode = myEvent.keyCode;
    if(keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46){
     //1 得到文本框中的内容
     var wordtext = $("#word").val();
     if(wordtext!=""){
       //2 把这的信息网服务器中发送
       window.clearTimeout(timeoutId);
       //对发送到服务器进行交互延迟500毫秒比秒打字太快了没有抓取到
        timeoutId = window.setTimeout(function (){

        //第一个参数请求的地址第二个参数传递的参数第三个参数回调函数第四个参数数据回传的数据类型
        $.post("auto_onblurquery.aiyu",{word:wordtext},function(data){
         // 将dom对象data 转化成JQuery 对象昂
         //alert(data);
         var jqueryObj = $(data);
         //alert(data);
         // 到xml 中找到所有的woerd节点
         var wordNode = jqueryObj.find("word");
         //alert(wordNode);
         var autoNode = $("#auto");
         autoNode.html("");
         // 遍历所有恶woed 节点取出单词
         wordNode.each(function (i){
          //获取单词的内容
          var wordN = $(this);
          // 新建div节点将单词放进去
          //alert(wordN.text());
          //将div节点加入到弹出框汇总
          var newdivNode = $("<div>").attr("id",i);
          newdivNode.addClass("auto-1").html(wordN.text()).appendTo(autoNode);
          //给鼠标加入进入的时候就高亮
          newdivNode.mouseover(function (){
           if(highlightindex!=-1){
            $("#auto").children("div").eq(highlightindex).removeClass("auto-2").addClass("auto-1");
           }
           highlightindex = $(this).attr("id");
           $(this).removeClass("auto-1").addClass("auto-2");
          });
          //鼠标移出的加上的样式
          newdivNode.mouseout(function (){
           $(this).removeClass("auto-2").addClass("auto-1");
          });
          //鼠标点击的时候增加的样式
          newdivNode.click(function (){
           //取出文本的内容
           var comtext = $(this).text();
           $("#auto").hide();
           //隐藏的时候就把节点重新的赋值
           highlightindex = -1;

           $("#word").val(comtext);
          });
         });

         if(wordNode.length>0){
          if($("#word").val()==""){
           $("#auto").hide();
           //隐藏的时候就把节点重新的赋值
           highlightindex = -1;
          }else{
           $("#auto").show();
          }
         }else{
          $("#auto").hide();
          //隐藏的时候就把节点重新的赋值
          highlightindex = -1;
         }
         //alert(data);
       },"xml");

        },500);

     }else{
      $("#auto").hide();
      //隐藏的时候就把节点重新的赋值
      highlightindex = -1;
     }

   }else if(keyCode == 38 || keyCode == 40){
    //如果是按得向上或是向下键
    if(keyCode == 38){
     //上
     var autoNodes = $("#auto").children("div");
     if(highlightindex!=-1){
      autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
      highlightindex--;
     }else{
      highlightindex = autoNodes.length-1;
     }

     if(highlightindex==-1){
      //如果修改过后的索引为-1 则索引到最后的节点
      highlightindex = autoNodes.length-1;
      }
      autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
    }
    if(keyCode == 40){
     //下
     var autoNodes = $("#auto").children("div");
     if(highlightindex!=-1){
      autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
     }
     highlightindex++;
     if(highlightindex>=autoNodes.length){
      highlightindex=0;
     }
     if(highlightindex==-1){
      //如果修改过后的索引为-1 则索引到最后的节点
      highlightindex = 0;
      }
      autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
    }
   }else if(keyCode == 13){
    //按下的回车
    //下拉框中被选中有选中的东西
    if(highlightindex!=-1){
     //取出文本的内容
     var comtext = $("#auto").children("div").eq(highlightindex).text();
     $("#auto").hide();
     //隐藏的时候就把节点重新的赋值
     highlightindex = -1;
      $("#word").val(comtext);
    }else{
    //下拉框中没有选中的东西
     alert("文本框的["+$("#word").val()+"]被提交了");
     $("#auto").hide();
     $("#word").blur();
    }
   }
   });

   $("input[id='chk']").click(function (){
    alert("文本框的["+$("#word").val()+"]被提交了");
   });
  });

最后返回xml 的代码