AJAX基础教程－9 AutoComplete

java 代码

package ajax.foundations_of_ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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");
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        String prefix = request.getParameter("names");
        response.setCharacterEncoding("UTF-8");
        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);
        }
    }

}

js 代码

<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;
    //创建xmlHttp对象
    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 = "AutoComplete?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>