Ajax實現仿Google自動補全功能

這是一個Servlet應用。。

這裡分別通過<div>和<select>兩種方式實現仿Google自動補全功能

首先是通過<div>實現的。。autoCompleteUseDIV.jsp

思想：各自建立DIV層以存放每一個提示出來的補齊文本

取值：目前只能用滑鼠點擊來選值

缺點：雖同時支援Firefox和IE，但功能不夠人性化，使用者體驗度不高

<%@ page language="java" pageEncoding="UTF-8"%><br /><style><br />#auto {<br />position: absolute;<br />display: none;<br />background-color: #FFFFC0;<br />border: solid 1px #808080;<br />font-size: 12px;<br />color: green;<br />cursor: pointer;<br />padding: 3px;<br />}<br /></style><br /><script type="text/javascript"><br />var xmlHTTP = new XMLHttpRequest(); //支援Internet Explorer-8.0.6001.18702</p><p>function getGoogleList(txt){<br />if("" == txt){<br />return;<br />}<br />xmlHTTP.open('GET', encodeURI('${pageContext.request.contextPath}/servlet/GoogleListServlet?txt='+txt), true);<br />xmlHTTP.onreadystatechange = callback; //${pageContext.request.contextPath}為EL運算式，等效於<%=request.getContextPath()%><br />xmlHTTP.send(null);<br />}</p><p>function callback(){<br />if(4==xmlHTTP.readyState && 200==xmlHTTP.status){<br />var txt = document.getElementById('txt');<br />var auto = document.getElementById('auto');</p><p>var s = xmlHTTP.responseText;<br />if("" == s){<br />auto.style.display = 'none'; //隱藏該層<br />return;<br />}<br />auto.innerHTML = ''; //清空auto層的內容</p><p>var ss = s.split(","); //分割伺服器返回的字串，得到ss數組</p><p>//(ss.length-1)是為瞭解決伺服器端返回的字串中，最後一個逗號的問題<br />for(var i=0; i<(ss.length-1); i++){<br />//建立層。也就是讓彈出的每一行文本都各佔一個div層，即子層<br />var div = document.createElement('DIV');<br />//經測試，其在Firefox3.6.13和IE8中均有效。。或者使用div.innerText = ss[i];但它在Firefox無效<br />div.appendChild(document.createTextNode(ss[i]));<br />//將建立的子層，放到父層中。即放到id="auto"的div層中<br />auto.appendChild(div);<br />//關於該層的三個事件處理的函數，一個是滑鼠移動到層上，一個是滑鼠從該層移出，一個是按一下滑鼠選項卡取值<br />div.onmouseover = function(){<br />this.style.backgroundColor = 'red'; //當滑鼠放到上面的時候，令其背景色為紅色<br />};<br />div.onmouseout = function(){<br />this.style.backgroundColor = '#FFFFC0'; //當滑鼠移走之後，恢複背景色<br />};<br />div.onclick = function(){ //處理onclick事件的函數，按一下滑鼠取值<br />txt.value = this.innerHTML; //或者使用txt.value = ss[i];也可以<br />this.parentNode.style.display = 'none'; //隱藏父層。即隱藏id="auto"的div層<br />};<br />}<br />//設定id="auto"的層的顯示位置<br />var left = txt.offsetLeft; //得到id="txt"的文字框與瀏覽器左側之間的距離<br />var top = txt.offsetTop; //得到id="txt"的文字框與瀏覽器頂部之間的距離<br />auto.style.left = left; //指定id="auto"的層與瀏覽器左側的距離。即與文字框的左側對齊<br />auto.style.top = top + txt.offsetHeight; //txt.offsetHeight能夠取得文字框的高度<br />auto.style.width = txt.offsetWidth; //令id="auto"的div層的寬度，與文字框的寬度一致<br />auto.style.display = 'block'; //令auto層顯示<br />}<br />}<br /></script></p><p>我要搜尋：<input type="text" id="txt" onkeyup="getGoogleList(this.value)"/><br /><div id="auto"></div>

接下來是通過<select>實現的。。autoCompleteUseSELECT.jsp

思想：在一個父DIV層中建立一個select下拉式清單方塊，並指明長度

          如此實現的效果就是：能夠使用上下鍵來選擇所要補齊的文本

取值：允許使用斷行符號鍵和滑鼠點擊兩種方式來選值

缺點：由於window.event在Firefox中無效，故其不支援Firefox，詳情參閱下面第25行的代碼注釋

<%@ page language="java" pageEncoding="UTF-8"%></p><p><style><br />#auto{<br />position: absolute;<br />display: none;<br />}<br />#se{<br />color: green;<br />border-width: 1px;<br />border-style: solid;<br />background-color: #FFFFC0;<br />}<br /></style></p><p><script type="text/javascript"><br />var xmlHTTP = new XMLHttpRequest(); //支援Internet Explorer-8.0.6001.18702</p><p>function getGoogleList(txt){<br />if("" == txt){<br />return;<br />}<br />var auto = document.getElementById('auto');</p><p>//window.event.keyCode可以用來設定或者擷取，與導致事件的按鍵，關聯的ASCII碼<br />//但其只對IE有效，原因是Firefox的window對象沒有event屬性，所以window.event在Firefox中是無效的<br />//那麼，在Firefox中的解決辦法是：在事件控制代碼函數的第一個參數上，擷取事件對象<br />//詳情，請參見我的博文http://blog.csdn.net/jadyer/archive/2011/01/27/6167244.aspx<br />if(40==event.keyCode && 'block'==auto.style.display){ //40代表向下鍵<br />var selectValues = document.getElementById('se'); //得到選項卡<br />selectValues.focus(); //讓選項卡獲得焦點<br />selectValues.selectedIndex = 0; //讓選項卡中的第一個元素選中<br />document.getElementById('txt').value = selectValues.value; //讓文字框顯示的值為選項卡的第一個元素值<br />return;<br />}<br />auto.style.display == 'none'; //隱藏<div id="auto">層<br />xmlHTTP.open('GET', encodeURI('${pageContext.request.contextPath}/servlet/GoogleListServlet?txt='+txt), true);<br />xmlHTTP.onreadystatechange = callback;<br />xmlHTTP.send(null);<br />}</p><p>function callback(){<br />if(4==xmlHTTP.readyState && 200==xmlHTTP.status){<br />var txt = document.getElementById('txt'); //得到文字框<br />var auto = document.getElementById('auto'); //擷取選項卡的層<br />var selectValues = document.getElementById('se'); //得到選項卡</p><p>selectValues.length = 0; //刪除<option>選項卡。或者使用selectValues.options.length=0;</p><p>var s = xmlHTTP.responseText;<br />if("" == s){<br />auto.style.display = 'none';<br />return;<br />}</p><p>var ss = s.split(",");<br />//指定<select>的長度，即返回的字串的長度。注意返回的字串的尾部還包含一個逗號，所以要減一<br />selectValues.size = ss.length-1;<br />for(var i=0; i<(ss.length-1); i++){<br />selectValues.options[i] = new Option(ss[i], ss[i]);<br />}</p><p>//指定<select>的事件處理的函數，令其支援斷行符號鍵選值和按一下滑鼠選值<br />selectValues.onkeyup = function(){<br />txt.value = this.value; //這裡this指的是<select>下拉式清單方塊，而不是某個<option>選項卡<br />if(13 == event.keyCode){ //13代表斷行符號鍵<br />this.parentNode.style.display = 'none'; //隱藏<option>選項卡<br />}<br />};<br />selectValues.onclick = function(){ //按一下滑鼠選值<br />txt.value = this.value;<br />this.parentNode.style.display = 'none'; //隱藏<option>選項卡<br />};<br />//設定<div id="auto">層的位置<br />var left = txt.offsetLeft;<br />var top = txt.offsetTop;<br />auto.style.left = left;<br />auto.style.top = top + txt.offsetHeight;<br />auto.style.width = txt.offsetWidth;<br />auto.style.display = 'block';<br />}<br />}<br /></script></p><p>我要搜尋：<input type="text" id="txt" onkeyup="getGoogleList(this.value)"/><br /><div id="auto"><br /><select id="se"></select><br /></div>

然後是web.xml檔案

<?xml version="1.0" encoding="UTF-8"?><br /><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"<br />xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"<br />xsi:schemaLocation="http://java.sun.com/xml/ns/javaee<br />http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><br /><servlet><br /><servlet-name>GoogleListServlet</servlet-name><br /><servlet-class>com.jadyer.ajax.GoogleListServlet</servlet-class><br /></servlet><br /><servlet-mapping><br /><servlet-name>GoogleListServlet</servlet-name><br /><url-pattern>/servlet/GoogleListServlet</url-pattern><br /></servlet-mapping><br /></web-app>

最後是用來處理Ajax請求操作的GoogleListServlet.java

package com.jadyer.ajax;</p><p>import java.io.IOException;<br />import java.io.PrintWriter;<br />import java.util.List;<br />import java.util.Vector;</p><p>import javax.servlet.ServletException;<br />import javax.servlet.http.HttpServlet;<br />import javax.servlet.http.HttpServletRequest;<br />import javax.servlet.http.HttpServletResponse;</p><p>@SuppressWarnings("serial")<br />public class GoogleListServlet extends HttpServlet {<br />List<String> users = new Vector<String>();</p><p>@Override<br />public void init() throws ServletException {<br />users.add("我愛學習");<br />users.add("我喜歡Java");<br />users.add("我也喜歡money");<br />users.add("我想找一個女朋友");<br />users.add("神乎其神");<br />users.add("神馬最給力");<br />users.add("神仙長生不老");<br />users.add("神奇的心有靈犀");<br />}</p><p>@Override<br />public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {<br />request.setCharacterEncoding("UTF-8");<br />String txt = request.getParameter("txt");<br />response.setContentType("text/html; charset=UTF-8");<br />PrintWriter out = response.getWriter();<br />for(String user : users){<br />if(user.startsWith(txt)){<br />//此時返回給用戶端的是類似【我愛學習,我喜歡Java,我也喜歡money,】的字串<br />//注意其還尾部包含一個逗號，所以前台頁面在處理時，判斷的是i<(ss.length-1)<br />out.print(user + ",");<br />}<br />}<br />out.close();<br />}<br />}