后台我用DWR进行异步数据传递：
代码很简单，就是返回一个数组，如果需求不同可以自己修改：
|
1
2
3
4
5
6
7
8
9
10
11
|
package org.dwr.re;
/**
* 测试 返回数组
* @author 崔素强
*/
public class BackArray {
public String[] backArr() {
String[] arr = new String[] { "坚持", "就是", "胜利" };
return arr;
}
}
|
前台记得导入DWR的JS，和JQuery的JS，然后写文本框的输入事件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<%@ 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%>" rel="external nofollow" >
<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>
|
当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://www.iteye.com/blog/cuisuqiang-1541423