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;" οnmοuseοver='assistInput.changeCss(assistInput)' οnclick='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" οnkeyup="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效果，请继续关注我的博客，夜深人静了，我也要睡了...................