编辑“Ajax- 提供自动完成”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>

我们遇到的最受欢迎的功能之一就是自动完成。许多人都使用过Intuit的Quicken之类的工具，并对其注册表的功能很是着迷，它的注册表能根据以前的注册项填入信息。这就使得数据输入更快、更容易，而且不容易出错。对于胖客户应用，增加这个功能可能很容易，但是Web应用长期以来一直都没有这个特性[1]。不过，Google在其beta实验区推出Google Suggest后，证明了自动完成对于Web应用并非遥不可及。 <br>

Google Suggest实在让人赞叹不已（见图4-16）。它不仅很好地放置了下拉区，还会在输入框中自动插入最有可能的答案，并将非用户键入的部分置灰，在下拉区中甚至还能使用向上和向下箭头。由于为给定项提供了一些结果，用户就能更清楚地认识到具体完成搜索时可能会得到的结果。<br>

许多网站都对Google Suggest做了剖析（可以在google上查Google Suggest！）。代码清单4-17所示的例子比不上Google Suggest那么丰富，但你确实能从中了解到利用Ajax可以做些什么。需要注意，在这个例子中，callback()函数除了查找一般的返回码200，还会查找返回码204。204响应码指示服务器没有发回任何信息，利用个提示可以清空名字下拉区。你还会注意到，通过点记法为单元格设置鼠标事件，这一点在前面的“为什么不能用setAttribute方法来设置Delete按钮的事件处理程序？”旁注中已经解释过。重申一次，使用calculateOffset()方法来确定应该把数据放在哪个位置。<br>

[[Image:image016.jpg]]
图4-16  Ajax为Google Suggest增色不少<br>

代码清单4-17  
 autoComplete.html<br>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
 <html><br>
  <head><br>
    <title>Ajax Auto Complete</title><br>
    <style type="text/css"><br>
    .mouseOut {<br>
    background: #708090;<br>
    color: #FFFAFA;<br>
    }<br>
    .mouseOver {<br>
    background: #FFFAFA;<br>
    color: #000000;<br>
    }<br>
    </style>v
    <script type="text/javascript"><br>
        var xmlHttp;<br>
        var completeDiv;<br>
        var inputField;<br>
        var nameTable;<br>
        var nameTableBody;<br>
        function createXMLHttpRequest() {<br>
            if (window.ActiveXObject) {<br>
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
            }<br>
            else if (window.XMLHttpRequest) {<br>
                xmlHttp = new XMLHttpRequest();<br>
            }<br>
        }<br>
        function initVars() {<br>
            inputField = document.getElementById("names");<br>
            nameTable = document.getElementById("name_table");<br>
            completeDiv = document.getElementById("popup");<br>
            nameTableBody = document.getElementById("name_table_body");<br>
        }<br>
        function findNames() {<br>
            initVars();<br>
            if (inputField.value.length > 0) {<br>
                createXMLHttpRequest();<br>
                var url = "AutoCompleteServlet?names=" + escape(inputField.value);<br>
                xmlHttp.open("GET", url, true);<br>
                xmlHttp.onreadystatechange = callback;<br>
                xmlHttp.send(null);<br>
            } else {<br>
                clearNames();<br>
            }<br>
        }<br>
        function callback() {<br>
            if (xmlHttp.readyState == 4) {<br>
                if (xmlHttp.status == 200) {<br>
                    var name =<br>
                             xmlHttp.responseXML<br>
                          .getElementsByTagName("name")[0].firstChild.data;<br>
                    setNames(xmlHttp.responseXML.getElementsByTagName("name"));<br>
                } else if (xmlHttp.status == 204){<br>
                    clearNames();<br>
                }<br>
            }<br>
        }<br>
        function setNames(the_names) {<br>
            clearNames();<br>
            var size = the_names.length;<br>
            setOffsets();<br>
            var row, cell, txtNode;<br>
            for (var i = 0; i < size; i++) {<br>
                var nextNode = the_names[i].firstChild.data;<br>
                row = document.createElement("tr");<br>
                cell = document.createElement("td");<br>
               cell.onmouseout = function() {this.className='mouseOver';};<br>
                cell.onmouseover = function() {this.className='mouseOut';};<br>
                cell.setAttribute("bgcolor", "#FFFAFA");<br>
                cell.setAttribute("border", "0");<br>
                cell.onclick = function() { populateName(this); } ;<br>
                txtNode = document.createTextNode(nextNode);<br>
                cell.appendChild(txtNode);<br>
                row.appendChild(cell);<br>
                nameTableBody.appendChild(row);<br>
            }<br>
        }<br>
        function setOffsets() {<br>
            var end = inputField.offsetWidth;<br>
            var left = calculateOffsetLeft(inputField);<br>
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;<br>
            completeDiv.style.border = "black 1px solid";<br>
            completeDiv.style.left = left + "px";<br>
            completeDiv.style.top = top + "px";<br>
            nameTable.style.width = end + "px";<br>
        }<br>
        function calculateOffsetLeft(field) {<br>
          return calculateOffset(field, "offsetLeft");<br>
        }<br>
        function calculateOffsetTop(field) {<br>
          return calculateOffset(field, "offsetTop");<br>
        }<br>
        function calculateOffset(field, attr) {<br>
          var offset = 0;<br>
          while(field) {<br>
            offset += field[attr];<br>
            field = field.offsetParent;<br>
          }<br>
          return offset;<br>
        }<br>
        function populateName(cell) {<br>
            inputField.value = cell.firstChild.nodeValue;<br>
            clearNames();<br>
        }<br>
        function clearNames() {<br>
            var ind = nameTableBody.childNodes.length;<br>
            for (var i = ind - 1; i >= 0 ; i--) {<br>
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);<br>
            }<br>
            completeDiv.style.border = "none";<br>
        }<br>
    </script><br>
  </head><br>
  <body><br>
    <nowiki> <h1>Ajax Auto Complete Example</h1></nowiki><br>
    <nowiki>Names: <input type="text" size="20" id="names"</nowiki><br>
                                  <nowiki>onkeyup="findNames();" style="height:20;"/></nowiki><br>
        <nowiki><div style="position:absolute;" id="popup"></nowiki><br>
            <nowiki><table id="name_table" bgcolor="#FFFAFA" border="0"</nowiki><br>
                                            <nowiki>cellspacing="0" cellpadding="0"/></nowiki><br>
            <nowiki><tbody id="name_table_body"></tbody></nowiki><br>
        <nowiki></table></nowiki><br>
    <nowiki></div></nowiki><br>
  </body><br>
 </html><br>

服务器端代码模拟了命名服务的动态名字搜索功能。servlet中设置了一组名字，搜索委托给包含有查找逻辑的另一个类。注意，如果没有找到任何数据，要向客户返回响应，指示没有内容。代码清单4-18显示了AutoCompleteServlet.java，代码清单4-19是NameSer-
vice.java。<br>

代码清单4-18 
 AutoCompleteServlet.java<br>
 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import java.util.ArrayList;<br>
 import java.util.Iterator;<br>
 import java.util.List;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class AutoCompleteServlet extends HttpServlet {<br>
    private List names = new ArrayList();<br>
    public void init(ServletConfig config) throws ServletException {<br>
        names.add("Abe");<br>
        names.add("Abel");<br>
        names.add("Abigail");<br>
        names.add("Abner");<br>
        names.add("Abraham");<br>
        names.add("Marcus");<br>
        names.add("Marcy");<br>
        names.add("Marge");<br>
        names.add("Marie");<br>
    }<br>
 protected void doGet(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String prefix = request.getParameter("names");<br>
        NameService service = NameService.getInstance(names);<br>
        List matching = service.findNames(prefix);<br>
        if (matching.size() > 0) {<br>
            PrintWriter out = response.getWriter();<br>
            response.setContentType("text/xml");<br>
            response.setHeader("Cache-Control", "no-cache");<br>
            out.println("<response>");<br>
            Iterator iter = matching.iterator();<br>
            while(iter.hasNext()) {<br>
                String name = (String) iter.next();<br>
                out.println("<name>" + name + "</name>");v
            }<br>
            out.println("</response>");<br>
            matching = null;<br>
            service = null;<br>
            out.close();<br>
        } else {<br>
            response.setStatus(HttpServletResponse.SC_NO_CONTENT);<br>
        }<br>
    }<br>
 }

代码清单4-19  
 NameService.java<br>
 package ajaxbook.chap4;<br>
 import java.util.ArrayList;<br>
 import java.util.Iterator;<br>
 import java.util.List;<br>
 public class NameService {<br>
    private List names;<br>
    /** Creates a new instance of NameService */<br>
    private NameService(List list_of_names) {<br>
        this.names = list_of_names;<br>
    }<br>
    public static NameService getInstance(List list_of_names) {<br>
        return new NameService(list_of_names);<br>
    }<br>
    public List findNames(String prefix) {<br>
        String prefix_upper = prefix.toUpperCase();<br>
        List matches = new ArrayList();<br>
        Iterator iter = names.iterator();<br>
        while(iter.hasNext()) {<br>
            String name = (String) iter.next();<br>
            String name_upper_case = name.toUpperCase();<br>
            if(name_upper_case.startsWith(prefix_upper)){<br>
               boolean result = matches.add(name);<br>
            }<br>
        }<br>
        return matches;<br>
    }<br>
 }<br>
图4-17显示了实际运行的自动完成示例。<br>
[[Image:image017.jpg]]
[[category:Ajax]]