JQuery，Json自动补全
Servlet: CompleteServer.java
import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; /** * Servlet implementation class CompleteServer */ public class CompleteServer extends HttpServlet { private JSONArray jsonList; private static final long serialVersionUID = 1L; public CompleteServer() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); String word = request.getParameter("word"); /******************** 虚假数据 ********************/ System.out.println("come!"); ArrayList<String> aResult = new ArrayList<String>(); ArrayList<String> bResult = new ArrayList<String>(); ArrayList<String> cResult = new ArrayList<String>(); /***** 模拟一下 *****/ if (word.startsWith("a")) { aResult.add("apple"); aResult.add("application"); aResult.add("awp"); aResult.add("abc"); jsonList = JSONArray.fromObject(aResult); } else if (word.startsWith("b")) { bResult.add("banana"); bResult.add("big"); bResult.add("brother"); bResult.add("button"); bResult.add("byte"); bResult.add("build"); jsonList = JSONArray.fromObject(bResult); } else { cResult.add("computer"); cResult.add("complete"); cResult.add("confirm"); cResult.add("consider"); cResult.add("confident"); cResult.add("compass"); cResult.add("connection"); cResult.add("config"); jsonList = JSONArray.fromObject(cResult); } PrintWriter out = response.getWriter(); out.println(jsonList); out.close(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
页面：index.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> <script type="text/javascript" src=jquery-1.7.1.js></script> <script type="text/javascript" src=complete.js></script> </head> <body> <input type="text" id="word" /> <div id="auto"></div> </body> </html>
JS: complete.js
var highlightindex = -1; $(document).ready( function() { var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); // 自动补全框最开始应该隐藏起来 $("#auto").hide().css("border", "1px black solid").css("position", "absolute").css("top", wordInputOffset.top + wordInput.height() + 5 + "px").css( "left", wordInputOffset.left + "px").width( wordInput.width() + 2); // 给文本框添加键盘按下并弹起的事件 wordInput.keyup(function(event) { // 处理文本框中的键盘事件 var myEvent = event || window.event; var keyCode = myEvent.keyCode; // 如果输入的是字母，应该将文本框中最新的信息发送给服务器 // 如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器 if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { // 1.首先获取文本框中的内容 var wordText = $("#word").val(); var autoNode = $("#auto"); if (wordText != "") { // 2.将文本框中的内容发送给服务器段 $.post("CompleteServer", { word : wordText }, function(data) { // 需要清空原来的内容 autoNode.html(""); for ( var i = 0; i < data.length; i++) { var newDiv = $("<div>"); newDiv.html(data[i]); newDiv.appendTo(autoNode); newDiv.mouseover(function() { if(highlightindex!=-1){ var autoNodes = $("#auto").children("div"); autoNodes.eq(highlightindex).css("background-color", "transparent"); highlightindex = -1; } $(this).css("background-color", "GreenYellow"); }); newDiv.mouseout(function() { $(this).css("background-color", "transparent"); }); newDiv.click(function() { var word = $(this).text(); $("#auto").hide(); $("#word").val(word); }); } // 如果服务器段有数据返回，则显示弹出框 if (data.length > 0) { autoNode.show(); } else { autoNode.hide(); // 弹出框隐藏的同时，高亮节点索引值也制成-1 highlightindex = -1; } }, "json"); } else { autoNode.hide(); highlightindex = -1; } } else if (keyCode == 38 || keyCode == 40) { // 如果输入的是向上38向下40按键 if (keyCode == 38) { // 向上 var autoNodes = $("#auto").children("div"); if (highlightindex != -1) { // 如果原来存在高亮节点，背景色透明 autoNodes.eq(highlightindex).css( "background-color", "transparent"); highlightindex--; } else { highlightindex = autoNodes.length - 1; } if (highlightindex == -1) { // 如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex = autoNodes.length - 1; } // 让现在高亮的内容变色 autoNodes.eq(highlightindex).css("background-color", "GreenYellow"); } if (keyCode == 40) { // 向下 var autoNodes = $("#auto").children("div"); if (highlightindex != -1) { // 如果原来存在高亮节点，背景色透明 autoNodes.eq(highlightindex).css( "background-color", "transparent"); } highlightindex++; if (highlightindex == autoNodes.length) { // 如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex = 0; } // 让现在高亮的内容变色 autoNodes.eq(highlightindex).css("background-color", "GreenYellow"); } } else if (keyCode == 13) { // 如果输入的是回车 // 下拉框有高亮内容 if (highlightindex != -1) { // 取出高亮节点的文本内容 var comText = $("#auto").hide().children("div").eq( highlightindex).text(); highlightindex = -1; // 文本框中的内容变成高亮节点的内容 $("#word").val(comText); } } }); });
有点小bug，还望大家能够优化优化，这里用到了json，json所需的包名在下面，大家可以copy名字去http://findjar.net/goSearch.x下载
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.0.jar
commons-logging-1.0.4.jar
ezmorph-1.0.6.jar
json-lib-2.4-jdk15.jar
版本一定要对应好哦~~~~
高手不要嘲笑，小弟也在优化。。。
