ajax + servlet 辅助输入的input-CSDN博客

本文链接：https://blog.csdn.net/webmastercn/article/details/725674

ajax + servlet 实现可以辅助输入的input

一、web.xml文件：
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>SoftwareLibrary</display-name>
<servlet>
  <servlet-name>AutoCompleteServlet</servlet-name>
  <display-name>AutoCompleteServlet</display-name>
   <servlet-class>cn.ht.AutoCompleteServlet</servlet-class>
</servlet>
   <servlet-mapping>
    <servlet-name>AutoCompleteServlet</servlet-name>
    <url-pattern>/AutoCompleteServlet</url-pattern>
   </servlet-mapping>
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

二、运行结果图：

无

三、index.htm文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax Auto Complete</title>
<style type="text/css">
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function initVars() {
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}

function callback() {

if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {//欧在这里停住了。取不出来
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.status == 204){
clearNames();
}
}
}

function setNames(the_names) {
clearNames();
var size = the_names.length;

setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = the_names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className='mouseOver';};
cell.onmouseover = function() {this.className='mouseOut';};
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
cell.onclick = function() { populateName(this); } ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}

function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}

function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}

function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}

function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}

function populateName(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}

function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
Names: <input type="text" size="20" id="names" οnkeyup="findNames();" style="height:20;"/>

四、servlet源文件：

/**

* 创建日期 2006-2-16

* @author

package cn.ht;

import java.io.*;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

import javax.servlet.*;

import javax.servlet.http.*;

import org.dom4j.*;

import com.cache.*;

public class AutoCompleteServlet extends HttpServlet {

private List names = new ArrayList();

public void init(ServletConfig config) throws ServletException {

//这里主要应结合数据库的相关数据。并添加到names 数组中。

names.add("abe");

names.add("abeo");

names.add("a王");

names.add("ahner");

names.add("javap");

names.add("marcus");

names.add("北沟");

names.add("marge");

names.add("北京猪");

names.add("北京");

names.add("上海");

}

protected void doPost(

HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException {

response.setCharacterEncoding("UTF8");//{//欧在这里停住了。报错误 response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

String prefix =new String(request.getParameter("names").getBytes("ISO-8859-1"),"UTF8");

NameService service = NameService.getInstance(names);

List matching = service.findNames(prefix);

LogUtil.log(Integer.toString(matching.size()));

if ( //产生并输出xml

matching.size() > 0) {

PrintWriter out = response.getWriter();

Document document = DocumentHelper.createDocument();

Element root = document.addElement("response");

Element name = null;

Iterator iter = matching.iterator();

while (iter.hasNext()) {

String name1 = (String) iter.next();

name = root.addElement("name");

name.setText(name1);

}

String s = root.asXML();

LogUtil.log(s);

out.write(s);

out.close();

} else {

response.setStatus(HttpServletResponse.SC_NO_CONTENT);

}

/**

* 创建日期 2006-2-16

* @author

package cn.ht;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

public class NameService {

private List names;

/** Creates a new instance of NameService */

private NameService(List list_of_names) {

this.names = list_of_names;

}

public static NameService getInstance(List list_of_names) {

return new NameService(list_of_names);

}

public List findNames(String prefix) {

List matches = new ArrayList();

Iterator iter = names.iterator();

while (iter.hasNext()) {

String name = (String) iter.next();

// 用String的 startsWith() 方法查找符合的选项

if (name.startsWith(prefix)) {

boolean result = matches.add(name);

}

return matches;

}

我用TOMCAT4.1,出错

2006-05-12 09:19:45 StandardWrapperValve[AutoCompleteServlet]: サーブレット AutoCompleteServlet のServlet.service()が例外を投げました
javax.servlet.ServletException: サーブレットの実行により例外を投げました
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:269)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:256)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardContext.invoke(StandardContext.java:2416)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:180)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.valves.ErrorDispatcherValve.invoke(ErrorDispatcherValve.java:171)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:172)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:174)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.valves.RequestDumperValve.invoke(RequestDumperValve.java:221)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.coyote.tomcat4.CoyoteAdapter.service(CoyoteAdapter.java:223)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:601)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.processConnection(Http11Protocol.java:392)
at org.apache.tomcat.util.net.TcpWorkerThread.runIt(PoolTcpEndpoint.java:565)
at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:619)
at java.lang.Thread.run(Thread.java:536)
----- Root Cause -----
java.lang.NoSuchMethodError: javax.servlet.ServletResponse.setCharacterEncoding(Ljava/lang/String;)V
at AutoCompleteServlet.doPost(AutoCompleteServlet.java:44)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:760)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:853)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:247)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:256)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardContext.invoke(StandardContext.java:2416)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:180)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.valves.ErrorDispatcherValve.invoke(ErrorDispatcherValve.java:171)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:172)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:174)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:643)
at org.apache.catalina.valves.RequestDumperValve.invoke(RequestDumperValve.java:221)
at org.apache.catalina.core.StandardPipeline$StandardPipelineValveContext.invokeNext(StandardPipeline.java:641)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:480)
at org.apache.catalina.core.ContainerBase.invoke(ContainerBase.java:995)
at org.apache.coyote.tomcat4.CoyoteAdapter.service(CoyoteAdapter.java:223)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:601)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.processConnection(Http11Protocol.java:392)
at org.apache.tomcat.util.net.TcpWorkerThread.runIt(PoolTcpEndpoint.java:565)
at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:619)
at java.lang.Thread.run(Thread.java:536)
也许5。5的话就好用了。不管了。