自动补全功能

最新推荐文章于 2023-06-15 10:52:55 发布

原创最新推荐文章于 2023-06-15 10:52:55 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Servlet #jQuery #应用服务器 #XML #ViewUI

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种基于JQuery的自动补全功能实现方法，通过AJAX与服务器交互，展示了一个具体的Java Servlet示例。该示例使用XML作为数据交换格式，并详细解释了前端JS代码如何处理用户输入及服务器响应。

/**
 * 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才能运行，需要启动服务器访问的，不是打开页面，就可以使用的