AJAX實現文字框輸入自動提示功能

     我認為任何絢麗的效果都是被客戶逼出來，因為客戶總是想花最少的銀子買到最好的軟體，就像我們總是想花最少的錢買到最好的貨物一樣。這周，霸蠻的客戶又霸蠻的要我開發一個新功能，原因是因為他們的老總喜歡這東西。我暈，難道你做這個軟體就是為了討好你的上級。開發就開發吧，不就寫點代碼嘛。

    所謂文字框輸入自動提示，就是指在文字框中輸入一個字元時，提示出跟該字元相應的列表，以方便使用者進行選擇，先SHOW一下效果圖：

  

 

    怎麼樣，是不是很漂亮。（本人自認為我的美術功底還是不錯的，哈哈）。明眼人一眼就能看出來，這個跟百度和google的輸入提示很像，沒錯，我就是模訪這兩個互連網巨人的效果。下面是具體步聚：

    一、編寫JavaScript，搞WEB開發，JS才是王道：

    /** * 輸入協助工具功能組件 該組件寫的我認為還算可以，如果您需要修改這個組件，請小心點改，不然改得不能用了而我又不在現場，那就不好辦了。 * * @type */ var assistInput = { li_index : -1, init : function(input, url) { //支援firefox var event = window.event || arguments.callee.caller.arguments[0]; var keyAsc = event.keyCode; // 從數字到字元、退格和刪除鍵，調用服務端方法 if (keyAsc >= 48 && keyAsc <= 97 || keyAsc == 8 || keyAsc == 46) { assistInput.findUserByAjax(input, url); } else { assistInput.lightMove(keyAsc); } }, findUserByAjax : function(input, url) { var assistParent = input.offsetParent; var str = input.value; filedName = input.name; var par = "str=" + str; var json = null; new Ajax.Request(url, { method : 'post', parameters : par, onComplete : function(response) { var text = response.responseText; json = eval("(" + text + ")"); if (json != null) { var myDiv = document .getElementById("assistInputDiv"); assistInput.setDivPosition(input);// 設定div的位置 var ul = assistInput.setUl(json, input); myDiv.innerHTML = ul; myDiv.style.display = "block"; } } }); }, lightMove : function(keyAsc) { var li = document.getElementById("assistInputDiv") .getElementsByTagName("li"); if (keyAsc === 40) { if (assistInput.li_index != -1) { // 恢複到原來的顏色 li[assistInput.li_index].className = ""; } assistInput.li_index++; // 如果到了最後一個元素，則從第一個開始 if (assistInput.li_index == li.length) { assistInput.li_index = 0; } // 改變樣式 li[assistInput.li_index].className = "input_Assist"; } if (keyAsc === 38) {// 向上 // 不等於-1時，索引自減 if (assistInput.li_index != -1) { // 恢複到原來的顏色 li[assistInput.li_index].className = ""; assistInput.li_index--; } // 等於-1時，將索引移動最後一位 if (assistInput.li_index == -1) { assistInput.li_index = li.length - 1; } li[assistInput.li_index].className = "input_Assist"; } if (keyAsc === 13) {// 斷行符號 // 調用設值方法 assistInput .fillAssistInputText(filedName, li[assistInput.li_index]); } }, //設定UL setUl : function(json, input) { if (json === undefined || json === "") { return; } var ul = "<ul class='ul_background' style='width:" + assistInputDiv.style.width + "'>"; for (var index in json) { var userObject = json[index]; var name = userObject["name"]; var filedValue = userObject["id"]; if (name === undefined) { continue; } else { if (index == 0) { ul += "<li class='input_Assist'"; } else { ul += "<li "; } ul += " id=" + filedValue + " style="list-style-type:none;" mce_style="list-style-type:none;" onmouseover='assistInput.changeCss(assistInput)' onclick='assistInput.fillAssistInputText(/"" + input.id + "/",assistInput)'>" + name + "</li>"; } } ul += "</ul>"; return ul; }, //設定DIV座標 setDivPosition : function(assistInput) { var assistHiddenDiv = document.getElementById("assistInputDiv"); // 得到文字框的高度、寬度、左邊距 var offsetLeft = assistInput.getBoundingClientRect().left + document.documentElement.scrollLeft; var offsetTop = assistInput.getBoundingClientRect().top + document.documentElement.scrollTop + 19; var offsetWidth = assistInput.offsetWidth; // 設定div的屬性 assistHiddenDiv.style.width = offsetWidth; assistHiddenDiv.style.left = offsetLeft; assistHiddenDiv.style.top = offsetTop; }, //設定文字框的值 fillAssistInputText : function(assistInputText, obj) { var assistInput = document.getElementById(assistInputText); assistInput.value = obj.innerText; // var filedId = assistInputText.substring(0, assistInputText.length - // 5); // document.getElementsByName(filedId)[0].value = obj.id; assistInputDiv.style.display = "none"; }, //滑鼠 移動時改變li 的CSS changeCss : function(obj) { var assistHiddenDiv = document.getElementById("assistInputDiv") .getElementsByTagName("li"); var length = assistHiddenDiv.length; for (var i in assistHiddenDiv) { assistHiddenDiv[i].className = ""; } obj.className = "input_Assist"; } } /** * 主函數 * @param {} input 需要進行輔助的input標籤對象 * @param {} url 服務端的URL，用於提供輔助資料 */ function main(input, url) { var assistInputObj = new assistInput.init(input, url); }

       大家可以看到，我用了prototype這個AJAX架構進行資料的提交，為什麼用AJAX。因為我們要做的效果是無刷效果，使用者每輸入一個字，就要從資料庫中查詢一遍，然後將查詢的資料返回到用戶端中，再通過DOM操作展示給使用者，這就是我們的基本思路。我們還需要處理鍵盤響應事件，例如使用者按下↑　↓兩個箭頭，我們需要將對應的li背景色改為紅色，當然，你想用什麼顏色都可以。另外就是滑鼠的進入和移出事件，跟上下箭頭處理是相似的。還有一個相當重要的鍵，您可能想到了，那就是斷行符號鍵，我們敲斷行符號鍵的時，應該將選中的檔案設定到文字框中。

  二、編寫樣式檔案，搞WEB開發CSS也是重頭戲：

   .input_Assist { background-color:red; } .ul_background { background-color:blue; margin-left:-40px; margin-top:-1px; list-style-type:none; }

    本人不才，只用了藍色和紅色兩種背景色，當然，這隻是我的一個DEMO，實際項目代碼是不能貼上來的，不然我就要賠錢了。

 三、編寫JSP頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="AssistInput/assistInput.css" mce_href="AssistInput/assistInput.css"></link> <mce:script src="AssistInput/prototype.js" mce_src="AssistInput/prototype.js"></mce:script> <mce:script src="AssistInput/assistInput.js" mce_src="AssistInput/assistInput.js"></mce:script> </head> <body> 姓名<input type="text" id="name" name="name" onkeyup="main(this,'demo/add.action');"/> <div id="assistInputDiv" style="position: absolute; bottom: 1in;right: 1in; top: 1in;height:200;overflow-y:auto;display:none;;border:#acc8ec 1px solid;"></div> </body> </html>  

   等等，.NET程式員千萬別砸我，你完全可以用ASP來實現，但是我是JAVA程式員，不能對.NET做出任何的交待。

 四、提供一個服務端的CGI程式

       現在軟體開發已經基本上沒有CGI這個說法了，但是，不管是servlet還是Struts中的Action，都是基於這個原理的，我用的是WebWork架構，我在這隻貼上一個Action，其他的配置就 看你們自己了。

 package com.boc.demo.action; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import com.boc.demo.pojo.Test; import com.opensymphony.webwork.ServletActionContext; import com.opensymphony.xwork.Action; public class TestAction implements Action { private String name; public String execute() throws Exception { HttpServletRequest request=ServletActionContext.getRequest(); HttpServletResponse response=ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); List<Test> list = new ArrayList<Test>(); for (int i = 0; i < 5; i++) { Test test = new Test(); test.setId(i + ""); test.setName("張三三" + i); list.add(test); } JSONArray jsonary=JSONArray.fromObject(list); response.getWriter().print(jsonary); // test.setName(name); // TestService ts = new TestService(); // ts.add(test); return null; } public String getName() { return name; } public void setName(String name) { this.name = name; } }

五、本樣本已經完了，欲知更多AJAX效果，請繼續關注我的部落格，夜深人靜了，我也要睡了...................