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

zoukankan html css js c++ java

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

        </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>
         | <a href="regin.jsp" >注册 </a>
         | <a href="invalidate.action" >注销</a>
         | <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> </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=" 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> </p>
      <p> </p>
</div>
</form>
</div>
<div id="auto" style="border-style: solid; border- 1px; visibility: hidden; position: absolute;margin-left:429px;margin-top:230px">
                 <select id="tags" onkeyup="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/

查看全文

相关阅读:
1、接口测试全流程
 7、执行 suite 后，result.html 测试报告中，测试结果全部显示为通过原因分析
 6、Python 中利用 openpyxl 读写 excel 操作
 5、Python 基础类型 -- Dictionary 字典类型
 4、Python 基础类型 -- Tuple 元祖类型
 cp: omitting directory”错误的解释和解决办法
 c++ 之bind使用
 Linux查找–find命令
 lsof命令总结
 Linux查看端口、进程情况及kill进程

原文地址：https://www.cnblogs.com/lcqBlogs/p/2392401.html