waynett
- 浏览: 28241 次
- 性别:
- 来自: 哈尔滨
-
文章分类
最新评论
/**
* 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才能运行，需要启动服务器访问的，不是打开页面，就可以使用的
- AutoComplete.rar (50.1 KB)
- 下载次数: 29
分享到：
发表评论
-
jmpopups点击空白处 ，弹出层就会消失的问题
2011-11-03 16:37 809$("#popupLayerScreenLocker ... -
jmpopups与chickbox(带有附件可下载直接查看效果)
2011-08-05 15:47 1426index.html <!DOCTYPE html ... -
jquery ajax json 模态对话框
2011-05-17 09:25 1083public JSONArray findPrettyRule ... -
jquery有关
2011-04-01 15:39 668$("#selectID option[value= ... -
Jquery + Css 实现横纵菜单下拉效果
2010-11-18 16:54 1761ul,li { /*清除ul,li默认的小原点*/ l ... -
省市县的二级联动
2010-11-18 16:50 1414<tr> <td height=& ...
相关推荐
java ajax实现自动补全功能,代码完整，经过调试运行不会出错，有需要的朋友下载
实现搜索的自动补全功能.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
ajax文本框自动补全功能，类似百度自动索引功能。
Ajax实现自动补全，案例详细。
用于eclipse开发中代码自动补全，包括类自动补全和xml文件自动补全
实现输入提示，自动补全功能，仿照百度，谷歌样式设计。请大家参考，有bug或者问题给我留言。
c#TextBox输入框自动提示、自动完成、自动补全功能
孤独的狼----jQuery实现自动补全功能
打开安装好的MyEclipse2017-CI10的\MyEclipse 2017 CI\plugins文件夹，把下载下来的jar进行替换。
c#textbox输入框自动提示、自动完成、自动补全功能.rar 详情请参考：http://blog.csdn.net/testcs_dn/article/details/45293253
自动补全包含：邮箱自动补全、城市自动补全、中文自动补全功能
本项目是利用DWR框架实现Ajax无刷新，自动补全功能！
javascript实现select标签支持手动输入并补全输入信息。
非常简便的自动补全功能，我自己在使用了，非常好用
Ajax实现自动补全功能，简单实用 使用struts1.2+hibernate3.2+spring2.0
C#dataGridView中输入框自动提示、自动完成、自动补全功能
jQuery UI Autocomplete是jQuery UI的自动完成组件，通过ajax请求的JSON数组、JSONP来获取数据，实现自动补全功能
SQLSERVER 2016 代码自动补全功能格式化工具 ApexSQL，ApexSQLCompare，ApexSQLComplete，ApexSQLRefactor，ApexSQLSearch
C# 动态自动补全功能 含css js 和前后台代码。。。。。。。。。。
js输入框（input）自动提示补全功能