/** * 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(); //弹出框隐藏的同时,高亮节点索引值也置成-1 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','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才能运行,需要启动服务器访问的,不是打开页面,就可以使用的