- /**
- * 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);
- }
- }
/** * 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() {
- }
- }
/** * */ 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>
<%@ 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>
<!-- 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>
<?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() + '】被提交了');
- }) ;
- });