后台我用DWR进行异步数据传递：
代码很简单，就是返回一个数组，如果需求不同可以自己修改：
package org.dwr.re;
/**
* 测试 返回数组
* @author 崔素强
*/
public class BackArray {
public String[] backArr() {
String[] arr = new String[] { "坚持", "就是", "胜利" };
return arr;
}
}
前台记得导入DWR的JS，和JQuery的JS，然后写文本框的输入事件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>自动补全</title>
<script type='text/javascript' src='/buquan/dwr/util.js'></script>
<script type='text/javascript' src='/buquan/dwr/engine.js'></script>
<script type='text/javascript' src='/buquan/dwr/interface/arr.js'></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var highlightindex = -1; //高亮节点
var timeOutId;
$(document).ready(function() {
var wordInput = $("#keyText"); //文本框值
var wordInputOffset = wordInput.offset(); //文本框属性
//初始时层隐藏,并设置它的样式,位置
$("#auto").hide().css("border","1px black solid")
.css("position","absolute")
.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputOffset.left + "px")
.width(wordInput.width() + 5);
//文本框事件
$("#keyText").keyup(function(){
var myEvent = event || window.event;
var keyCode = myEvent.keyCode; //取得按键的值
var autoNode = $("#auto");
//输入字母等的情况，包括回车，delete
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
autoNode.html("");
var wordText=$("#keyText").val(); //当前文本框值
if (wordText != ""){
//将上一次没有完成的请求清除
clearTimeout(timeOutId);
//将请求延迟
timeOutId = setTimeout(function(){
//使用DWR返回数据，暂时没有设置参数，返回一个字符串数组即可
arr.backArr(function back(data){
for(i = 0;i < data.length;i++){
var newDiv = $("<div>").attr("id",i); // 增加标识
newDiv.html(data[i]).appendTo(autoNode); //创建新的节点到原DIV元素
//鼠标移入事件
newDiv.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex)
.css("background-color","white");
}
//增加一个属性
highlightindex = $(this).attr("id");
//当前设为红色
$(this).css("background-color","red");
});
//鼠标移出事件
newDiv.mouseout(function(){
//当前清除颜色
$(this).css("background-color","white");
});
//鼠标单击事件
newDiv.click(function(){
//取出高亮节点的文本内容
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#keyText").val(comText);
});
}
if (data.length > 0){
autoNode.show();
}else{
autoNode.hide();
}
});
},500); //延迟处理
} else {
autoNode.hide();
}
highlightindex = -1;
} else if (keyCode == 38 || keyCode == 40) {
if (keyCode == 38) { //向上
var autoNodes = $("#auto").children("div")
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改称白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = autoNodes.length - 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++;
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;
//文本框中的内容变成高亮节点的内容
$("#keyText").val(comText);
} else {
//下拉框没有高亮内容
alert("文本框中的[" + $("#keyText").val() + "]被提交了");
}
}
});
});
</script>
</head>
<body>
<input type="text" id="keyText" name="keyText" width="50px" />
<div id="auto" align="left"></div>
</body>
</html>
当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！
请您到ITEYE看我的原创：http://cuisuqiang.iteye.com
或支持我的个人博客，地址：http://www.javacui.com
相关推荐
根据提供的文件信息，我们可以深入探讨如何使用SSH（Struts2 + Spring + Hibernate）框架结合DWR（Direct Web Remoting）实现自动补全功能。自动补全是现代Web应用中常见的交互特性之一，它不仅可以提高用户体验，还...
DWR自动补全 1111111111111111111111111111111111111222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
综上所述，"ssh_dwr_jQuery自动补全"项目是一个整合了多个关键技术的 Web 应用程序，旨在提供一个高效的搜索体验。它利用 SSH 框架处理后端逻辑，DWR 实现前后端通信，jQuery 提升前端交互，而 JSP 负责呈现数据。...
在标题提到的“dwr自动补全”中，我们可以理解为DWR提供了自动补全功能，这通常指的是在客户端（浏览器）编写JavaScript代码时，对DWR调用的服务器端方法或对象进行智能提示和补全。这种特性对于提高开发效率、减少...
jQuery Autocomplete是一个流行的UI功能，它提供了自动补全输入框的功能，而DWR则是一种在浏览器和服务器之间进行异步通信的技术。 首先，让我们详细了解一下jQuery Autocomplete。这是一个jQuery插件，它允许用户...
通过上述方法之一或结合使用，可以有效地解决jQuery和DWR.utls之间的冲突，确保两者的正常工作。在实际开发中，理解这些技术并灵活应用，可以帮助我们构建更稳定、更可靠的Web应用程序。在遇到类似问题时，应该首先...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
总的来说，这个项目展示了如何结合Java和Ajax，借助DWR框架，实现一个高效、无刷新的自动补全功能。开发者需要理解Ajax的工作原理，熟悉DWR的使用，以及具备一定的前端和后端开发技能。通过这个项目，我们可以学习到...
在IT领域，特别是Web开发中，Ajax（Asynchronous JavaScript and XML）技术和DWR（Direct Web Remoting）框架的结合被广泛应用于实现动态网页效果，尤其是内容自动补全功能，这在用户界面交互设计中极为常见。...
通过以上步骤，我们就能构建一个基于Ajax、DWR和Hibernate的自动补全功能。这个功能不仅可以用于搜索框，还可以应用到其他需要动态数据填充的场景，如地址选择、商品推荐等。熟练掌握这些技术将有助于提升Web应用的...
在本实例"**dwr补全查询**"中，我们关注的是如何利用DWR实现类似百度搜索那样的自动补全功能。这种功能通常用于提高用户输入效率，当用户在输入框中键入字符时，系统会根据已输入的字符实时查询数据库，并通过Ajax...
在本教程中，我们将深入探讨如何利用DWR框架来实现自动补全功能，结合Servlet和JDBC，为用户提供流畅的数据检索体验。 自动补全功能在现代Web应用中非常常见，例如搜索引擎、输入框建议等。它能够根据用户在输入框...
### 解决jQuery与DWR冲突的方法 在Web开发过程中，经常需要使用多种JavaScript库来实现丰富的前端交互效果。其中，jQuery因其简洁易用的特点而被广泛采用，而DWR（Direct Web Remoting）则是一种简化Java与...
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年，作为Ajax领域最全面、实用的图书，一直深受读者的好评。全书主要分为三个...
1. **设置环境**：首先，确保你有一个Java开发环境（如JDK）和Web服务器（如Tomcat），并且在项目中引入jQuery和DWR的依赖库。 2. **创建后端服务**：在Java后端，你需要编写一个或多个类来处理词典查询。这些类...
jquery与dwr两个ajax包因为$符号会冲突。 如果是通过jar包引入的dwr资源，修改$符号会有一些不便。...下载的jar包是基于dwr2.0.2修改，使用dwr的时候使用“D$”即可，解决了和jquery的“$”符号冲突的问题。
根据提供的文件信息，我们可以分析出该段代码涉及的是一个基于Ajax技术实现的用户输入自动补全功能。下面将从以下几个方面进行深入解析： ### 一、理解Ajax自动补全的基本概念 Ajax（Asynchronous JavaScript and ...
jquery与dwr两个ajax包因为$符号会冲突。 如果是通过jar包引入的dwr资源，修改$符号会有一些不便。...下载的jar包是基于dwr2.0.2修改，使用dwr的时候使用“D$”即可，解决了和jquery的“$”符号冲突的问题。
标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架，其中包含了多个关键技术和库。这个框架旨在提高开发效率，提供灵活的数据管理，以及用户友好的前端交互。 1. Struts2：...