ajax技术实现搜索提示

答案：javascript 异步调用 java端的action 然后 页面上javascript操作div现实数据
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" id="word">
    <input type="button" value="查询" id="chk"><br>
    <div id="auto"></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();
           //隐藏的时候就把节点重新的赋值
         &nb
上一个：MyEclipse中能怎么没有AJAX的向导
下一个：AJAX的“异步”该怎样理解？
更多图片编程知识: