struts中利用ajax实现仿google下拉列表自动补全功能

不多说了,看代码吧!哈哈!

 

 <1>index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
 String searchType = request.getParameter("tab");
 int i = 0;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <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">
<!--
.STYLE1 {color: #FFFFFF}
body {
 background-color: white;
}
#Layer1 {
 position:absolute;
 width:400px;
 height:146px;
 z-index:1;
 left: 424px;
 top: 242px;
}
-->
        </style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
 <%
  if (null == searchType)
   searchType = "all";
 %>
 
 
 <script type="text/javascript">
var xmlHttpRequest;
function createXmlHttpRequest()
{
 if(window.ActiveXObject)
 {
  try
  {
   xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e)
  {
   xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }
  return xmlHttpRequest;
 }
 else if(window.XMLHttpRequest)
 {
  return new XMLHttpRequest();
 }
}
function auto()
{
 var query = document.getElementById("query");
 var auto = document.getElementById("auto");
 var tags = document.getElementById("tags");
 if(event.keyCode == 40)
 { 
  if(query.value != "" && auto.style.visibility != "hidden")
  {
   tags.focus();
   tags.selectedIndex = 0;
   query.value = tags.options[0].text;
   return;
  }
 }
 xmlHttpRequest = createXmlHttpRequest();
 xmlHttpRequest.onreadystatechange = backFct;
 var url = "AjaxindexAction.action?tag=" + query.value;
 xmlHttpRequest.open("post",url,true);
 xmlHttpRequest.send(null);
}
function backFct()
{
 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
 {
  var rs = xmlHttpRequest.responseText;
  if(rs != "")
  {
   var tagsRs = rs.split(",");
   var auto = document.getElementById("auto");
   var tags = document.getElementById("tags");
   var query = document.getElementById("query");
   tags.length = 0;
   tags.size = tagsRs.length;
   for(var i=0;i<tagsRs.length;i++)
   {
    var option = document.createElement("option");
    option.setAttribute("text", tagsRs[i]);
    tags.options[i] = option;
   }
   auto.style.width = query.style.width;
   tags.style.width = query.style.width;
   auto.style.left = query.offsetLeft - 1;
   auto.style.top = query.offsetTop + query.offsetHeight + 1;
   auto.style.visibility = "visible";
  }
  else
  {
   document.getElementById("auto").style.visibility = "hidden";
  }
 }
}
function text()
{
 var query = document.getElementById("query");
 var auto = document.getElementById("auto");
 var tags = document.getElementById("tags");
 if(event.keyCode == 40 || event.keyCode == 38)
 { 
  if(query.value != "" && auto.style.visibility != "hidden")
  {
   query.value = tags.options[tags.selectedIndex].text;
  }
 }
 else if(event.keyCode == 13)
 {
  auto.style.visibility = "hidden";
  query.focus();
 }
}
</script>
 
<body>
  <div align="center">
    <table width="1240" border="0">
      <tr>
        <td width="643"><div align="left">
          <%if(session.getAttribute("user")!=null){
          out.println( "欢迎"+ session.getAttribute("user")+" 您已经登录");
   } %>
        </div></td>
        <td width="581"><div align="right"><a href="login.jsp" >登录 </a>
        &nbsp;|&nbsp;<a href="regin.jsp" >注册 </a>
        &nbsp;|&nbsp;<a href="invalidate.action" >注销</a>
        &nbsp;|&nbsp;<a href="Upload.jsp" >上传 </a>
        </div></td>
      </tr>
    </table>
    <br>
    <br>
    <br>
    <span class="STYLE1"></span>    <br>
</div>
<div align="center">
<form id="searchForm" name="searchForm" action="search.action"
   method="post">
  <div align="right">
      <p>&nbsp;</p>
      <table width="471" border="0" align="center">
        <tr>
          <td width="461" height="42"><div align="center"></div></td>
        </tr>
        <tr>
          <td height="65"><table border="0" align="center" width="452">
            <tr size="80">
              <td width="61" height="21" align="center"><%
       if (searchType.equals("all"))
        out.println("<strong>全部</strong>");
       else
        out.println("<a href='index.jsp?tab=all&i=0'>全部</a>");
      %>              </td>
              <td width="61" align="center"><%
       if (searchType.equals("doc"))
        out.println("<strong>文档</strong>");
       else
        out.println("<a href='index.jsp?tab=doc&i=0'>文档</a>");
      %>              </td>
              <td width="61" align="center"><%
       if (searchType.equals("mov"))
        out.println("<strong>视频</strong>");
       else
        out.println("<a href='index.jsp?tab=mov&i=0'>视频</a>");
      %>              </td>
              <td width="61" align="center"><%
       if (searchType.equals("music"))
        out.println("<strong>音乐</strong>");
       else
        out.println("<a href='index.jsp?tab=music&i=0'>音乐</a>");
      %>              </td>
              <td width="56" align="center"><%
       if (searchType.equals("other"))
        out.println("<strong>其他</strong>");
       else
        out.println("<a href='index.jsp?tab=other&i=0'>其他</a>");
      %>              </td>
              <td width="126"></td>
            </tr>
            <tr>
              <td colspan="5">
              <input type="text" name="keywords" id="query" onKeyUp="auto();" style=" width: 400px; height: 30px; font-size: 18px; background-color:white"/>
              
              </td>
              <td><input type="hidden" name="searchType" value="<%=searchType%>" />
                  <input type="hidden" name="i" value="<%=i%>" />
                  <input name="submit" type="submit"  style="height:32px; " value="搜索一下" />
              </td>
            </tr>
          </table></td>
        </tr>
      </table>
      <div id="Layer1"></div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
  </div>
</form>
</div>
 <div id="auto" style="border-style: solid; border-width: 1px; visibility: hidden; position: absolute;margin-left:429px;margin-top:230px">
                 <select id="tags" οnkeyup="text();" size="0" style=" margin:-2px;">
                 </select>
 </div>
</body>
</html>

<2>AjaxindexAction

package com.dreamers.login;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.dom4j.DocumentException;

import com.dreamers.xml.XmlReader;
import com.opensymphony.xwork2.ActionSupport;

public class AjaxindexAction extends ActionSupport implements ServletRequestAware ,ServletResponseAware{
 private static final long serialVersionUID = 1L;
    private HttpServletRequest request;
    private HttpServletResponse response;
    private List<String> db = new ArrayList<String>();
    public void setServletRequest(HttpServletRequest request) {
        this.request =request;
    }
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
    }
    public void init() throws DocumentException
    {
    /*
      db.add("Sean");

     db.add("Sean's Space");
     db.add("Sean's Computer");
     db.add("Sean's Blog");
     db.add("Sean Ajax");
     db.add("Sean javaer");
     db.add("John Web");
     db.add("John.com");
     db.add(".net");
     db.add("java");
     db.add("java framework");
     db.add("java MyEclipse");
     db.add("C++");
          */
     XmlReader reader = new XmlReader();
     db=reader.getTitle();
    }

 public String execute() throws Exception {
  init() ;
  System.out.println("doGet start");
  String tag = request.getParameter("tag");
  System.out.println(tag);
  response.setContentType("text/html;charset=GBK");
  if(tag != "")
  {
   String rs = "";
   for(int i=0;i<this.db.size();i++)
   {
    if(this.db.get(i).startsWith(tag))
    {
     rs = rs + this.db.get(i) + ",";
    }
   }
   if(rs != "")
   {
    rs = rs.substring(0, rs.length()-1);
   }
   System.out.println(rs);
   PrintWriter pw = response.getWriter();
   pw.write(rs);
   pw.flush();
   pw.close();
 
  }
  return null;
 }
}

<3>struts.xml配置

<action name="AjaxindexAction" class="com.dreamers.login.AjaxindexAction">
 
 </action>

以上代码是小生根据另一位兄台改的,对此十分感谢。先前他是用Servlet实现的,我改成了action实现。如有需要请参考链接:

http://blog.163.com/sean_zwx/blog/static/16903275520111222590736/

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值