Ajax_提供自动完成

最新推荐文章于 2021-08-06 09:34:56 发布

fsgsdfghdfh

最新推荐文章于 2021-08-06 09:34:56 发布

阅读量77

点赞数

分类专栏： Ajax技术应用文章标签： Ajax JavaScript CSS Cache Microsoft ViewUI

Ajax技术应用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <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 findNames() {
　　initVars();
　　if (inputField.value.length > 0) {
　　createXMLHttpRequest();
　　var url = "AutoCompleteServlet?names=" + escape(inputField.value);
　　xmlHttp.open("GET", url, true);
　　xmlHttp.onreadystatechange = callback;
　　xmlHttp.send(null);
　　} else {
　　clearNames();
　　}
　　}
　　function callback() {
　　if (xmlHttp.readyState == 4) {
　　if (xmlHttp.status == 200) {
　　var name =
　　xmlHttp.responseXML
　　.getElementsByTagName("name")[0].firstChild.data;
　　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>
   <h1>
    Ajax Auto Complete Example
   </h1>
   Names:
   <input type="text" size="20" id="names" οnkeyup="findNames();"
    style="height:20;" />
   <div style="position:absolute;" id="popup">
    <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0" />
     <tbody id="name_table_body"></tbody>
    </table>
   </div>
</body>
</html>

Servlet部分：

public class AutoCompleteServlet extends HttpServlet {

private List names = new ArrayList();

public void init(ServletConfig config) throws ServletException {
   names.add("Abe");
   names.add("Abel");
   names.add("Abigail");
   names.add("Abner");
   names.add("Abraham");
   names.add("Marcus");
   names.add("Marcy");
   names.add("Marge");
   names.add("Marie");
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   String prefix = request.getParameter("names");
   NameService service = NameService.getInstance(names);
   List matching = service.findNames(prefix);
   if (matching.size() > 0) {
    PrintWriter out = response.getWriter();
    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    out.println("<response>");
    Iterator iter = matching.iterator();
    while (iter.hasNext()) {
     String name = (String) iter.next();
     out.println("<name>" + name + "</name>");
    }
    out.println("</response>");
    matching = null;
    service = null;
    out.close();
   } else {
    response.setStatus(HttpServletResponse.SC_NO_CONTENT);
   }
}

}
public class NameService {
private List names;

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) {
   String prefix_upper = prefix.toUpperCase();
   List matches = new ArrayList();
   Iterator iter = names.iterator();
   while (iter.hasNext()) {
    String name = (String) iter.next();
    String name_upper_case = name.toUpperCase();
    if (name_upper_case.startsWith(prefix_upper)) {
     boolean result = matches.add(name);
    }
   }
   return matches;
}
}

fsgsdfghdfh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax_提供自动完成

JSP部分：&lt;%@ page language="java" import="java.util.*" pageEncoding="gbk"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;
复制链接

扫一扫

专栏目录