自动补全功能
/** * Servlet */package com.wll.autoComplete;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 自动补全功能 * 接收用户端请求 * @author wll * */public class AutoComplete extends HttpServlet {protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配String word = request.getParameter("word");//将字符串保存在request对象中request.setAttribute(Contants.PARAM, word);//将请求转发给视图层(注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作是一个数据层)request.getRequestDispatcher("wordxml.jsp").forward(request, response);}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}}?
/** * */package com.wll.autoComplete;/** * 常类 * * @author wll * */public class Contants {public static final String PARAM = "param";private Contants() {}}?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>JQuery自动补全</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqueryAuto.js"></script> </head> <body> JQuery实例-自动补全：<input type="text" id="word" name="word" /> <input type="button" id="buttonSubmit" name="buttonSubmit" value="提交" /><br /> <div id="auto"></div> </body></html>
?
<!-- ajax自动补全实例 --><!-- 与传统应用的视图层不同，这个jsp返回的是xml数据，因此contentType值是text/xml --><%@ page language="java" contentType="text/xml;charset=utf-8" %><%@page import="com.wll.autoComplete.Contants,java.util.*"%><!-- 返回xml数据的'视图层暂时不做任何逻辑判断，先所有单词都返回，待前后台应用可以完整的协作之后 ，再限制返回的内容' --><%//页面传送的字符串String word = (String)request.getAttribute(Contants.PARAM);List list = new ArrayList();list.add("absolute");list.add("anyone");list.add("apple");list.add("abandon");list.add("breach");list.add("break");list.add("bad");list.add("char");list.add("create");list.add("delete");list.add("java");list.add("attribute");%><words><%for(int i = 0;i < list.size();i ++) {if(list.get(i).toString().startsWith(word)) {%><word><%=list.get(i)%></word><%}}%></words>?
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>AutoComplete</servlet-name> <servlet-class>com.wll.autoComplete.AutoComplete</servlet-class> </servlet> <servlet-mapping> <servlet-name>AutoComplete</servlet-name> <url-pattern>/autoComplete</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
?
//表示当前高亮的节点var highlightindex = -1;var timeoutId;$(document).ready(function(){var wordInput = $('#word');var wordInputOffset = wordInput.offset();//自动补全框最开始应该隐藏起来$('#auto').hide().css('border','1px black solid');//设置div的位置$('#auto').css('position','absolute');$('#auto').css('top',wordInputOffset.top + wordInput.height() + 5 + 'px');$('#auto').css('left',wordInputOffset.left + 'px');$('#auto').width(wordInput.width() + 6);//给文本框添加键盘按下并弹起事件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();// 取得auto结点var autoNode = $('#auto');if(wordText != '') {//对上次未完成的延时操作进行取消clearTimeout(timeoutId);//对于服务器端进行交互延迟500ms,避免快速打字造成的频繁请求timeoutId = setTimeout(function(){//2.将文本框中的内容发送给服务器$.post("autoComplete",{word:wordText},function(data){//将dom对象data转换成JQuery的对象var jqueryObj = $(data);//找到所有的word节点var wordNodes = jqueryObj.find('word');//需要清空原来的内容autoNode.html('');//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中wordNodes.each(function(i){//获取单词内容var wordNode = $(this);//新建div节点//将新建的节点加入到弹出框的节点中 var newDivNode = $('<div>').attr('id',i);newDivNode.html(wordNode.text()).appendTo(autoNode);//增加鼠标进入事件，高亮节点newDivNode.mouseover(function(){//将原来高亮的节点取消高亮if(highlightindex != -1) {$('#auto').children('div').eq(highlightindex).css('background-color','white');}//记录新的高亮索引highlightindex = $(this).attr('id');//鼠标进入的节点高亮$(this).css('background-color','red');});//增加鼠标移出事件，取消高亮节点newDivNode.mouseout(function(){$(this).css('background-color','white');});//增加鼠标点击事件，可以进行补全newDivNode.click(function(){//取出高亮节点的文本内容var comText = $(this).text();$('#auto').hide();highlightindex = -1;//将文本框中的内容变成高亮节点的内容$('#word').val(comText);});});//如果服务器端有数据返回，则显示弹出框if(wordNodes.length > 0) {autoNode.show();} else {//如果服务器端没有数据返回autoNode.hide();}},'xml');},500);} else {autoNode.hide();//弹出框隐藏的同时，高亮节点索引值也置成-1highlightindex = -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','white');highlightindex = highlightindex - 1;} else {highlightindex = autoNodes.length - 1;}if(highlightindex == -1) {//如果修改索引值以后index变成-1，则将索引值指向最后一个元素highlightindex = autoNodes.lenght - 1;}//让现在的高亮的内容变成红色autoNodes.eq(highlightindex).css('background-color','red');}if (keyCode == 40) {//向下var autoNodes = $('#auto').children('div');if(highlightindex != -1) {//如果存在高亮节点，则将背景色改为白色autoNodes.eq(highlightindex).css('background-color','white');}highlightindex = highlightindex + 1;if(highlightindex == autoNodes.length) {//如果修改索引值以后index变成-1，则将索引值指向最后一个元素highlightindex = 0;}//让现在的高亮的内容变成红色autoNodes.eq(highlightindex).css('background-color','red');}} else if(keyCode == 13) {//如果输入的是回车//下拉框有高亮内容if(highlightindex != -1) {//取出高亮节点的文本内容var comText = $('#auto').hide().children('div').eq(highlightindex).text();highlightindex = -1;//将文本框中的内容变成高亮节点的内容$('#word').val(comText);} else {//下拉框无高亮内容alert('没有选择高亮内容');$('#auto').hide();//让文本框失去焦点$('#word').get(0).blur();}}});//给按钮添加事件，表示文本框中的数据被提交$("input[type]='button']")$('#buttonSubmit').click(function(){alert('文本框中的【' + $('#word').val() + '】被提交了');}) ;});?下载代码的注意咯，由于本人写程序不是从后台数据库读取取数据，加载的数据只有那么一点点而已，请输入以 a 或b 或c开头的英文字母然后才可以查看到效果，而且这是java程序需要用myeclipse才能运行，需要启动服务器访问的，不是打开页面，就可以使用的