1、上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互使用XML做的，XML的传输是十分耗带宽的，用于我们这些做着玩的还可以，但是 一旦数据量大起来他就相当的不给力了，所以我想使用JSON格式的数据传输，这样应该会好很多，说实话，之前知道有JSON，但是没学过啊，所以只好先学 学JSON，至于JSON如何用我就不介绍了，大家网上搜搜到处都是，如果有什么搜不到的可以给我留言，虽然我不精通，但是基本使用还是能够应付的。
好了，言归正传，说说我们这次的主题，这次修复的BUG是什么呢？有童鞋发现了吗？，好吧，没发现也没关系，因为我自己也是这次才发现。那就是 setTimeout()的问
2、题，大家在服务器端加个打印输出一下，我们会发现时延并没有起到效果。好了，这次我就不上源码了，也不上图了，直接上修复过 的代码，和使用JSON的部分。注意哦，要加上json.js，和一个JSON包，这个我打包给大家上传。
JS:
Java代码
1. //高亮索引
2. var highlightindex=-1;
3. var timeDelay;
4. //设置文本框的内容
5. function setContent(con,index){
6. var context=con.eq(index).text();
7.
3、 $("#content").val(context);
8. }
9.
10. //设置背景颜色
11. function setBkColor(con,index,color){
12. con.eq(index).css("background-color",color);
13. }
14.
15. $(document).ready(
16. function(){
17. //获得输入框节点
18. var inputItem=$("#content");
1
4、9. var inputOffset=inputItem.offset();
20. var autonode=$("#auto");
21. //设置提示框隐藏
22. autonode.hide().css("border","1px black solid").css("position","absolute")
23. .css("top",inputOffset.top+inputItem.height()+5+"px")
24. .css("left",in
5、putOffset.left+"px").width(inputItem.width()+"px");
25.
26. //当键盘抬起时触发事件执行访问服务器业务
27. $("#content").keyup(
28. function(event){
29. var myevent=event||window.event;
30. var mykeyCode=myevent.keyCode;
31.
32.
6、 //字母，退格，删除，空格
33. if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){
34. //清除上一次的内容
35. autonode.html(" ");
36. //获得文本框内容
37. var word=$("#content").
7、val();
38. if(word!=""){
39. function mydeal(){
40. //将文本框的内容发到服务器
41. $.post("Autocomplete",{wordtext:encodeURI(word)},
42. function(data){
43.
8、 var wordNodes=data;
44. $.each(data,
45. function(i){
46. //拼接返回数据
47. var newNode=$("
").html(data[i]).attr("id",i).
9、addClass("pro");
48. //将返回内容附加到页面
49. newNode.appendTo(autonode);
50. //处理鼠标事件
51. var con=$("#auto").children("div");
52.
10、 //鼠标经过
53. newNode.mouseover(
54. function(){
55. if(highlightindex!=-1){
56. setBkColor(con,highlight
11、index,"white");
57. }
58. highlightindex=$(this).attr("id");
59. $(this).css("background-color","#ADD8E6");
60.
12、setContent(con,highlightindex);
61. }
62. );
63. //鼠标离开
64. newNode.mouseout(
65. function(){
13、
66. $(this).css("background-color","white");
67. }
68. );
69. //鼠标点击
70. newNode.click(
14、
71. function(){
72. setContent(con,highlightindex);
73. highlightindex=-1;
74. autonode.hide();
75.
15、 }
76. );
77. }
78. ); //each
79.
80. //当返回的数据长度大于0才显示
81. if(wordNodes.length>0){
8
16、2. autonode.show();
83. }else{
84. autonode.hide();
85. }
86. }
87. ,"json");//post
88.
17、 }
89. //取消上次提交
90. clearTimeout(timeDelay);
91. //延迟提交，这边设置的为200ms
92. timeDelay=setTimeout(
93. mydeal,200); //settimeout
94.
18、 }else{
95. autonode.hide();
96. highlightindex=-1;
97. }
98. }else{
99. //alert();
100. //获得返回框中的值
101. var rvalue=$("#au
19、to").children("div");
102. //上下键
103. if(mykeyCode==38||mykeyCode==40){
104. //向上
105. if(mykeyCode==38){
106. if(highlightindex!=-1){
107.
20、 setBkColor(rvalue,highlightindex,"white");
108. highlightindex--;
109. }
110. if(highlightindex==-1){
111. setBkColor(rvalue,highlightindex,"white");
112.
21、 highlightindex=rvalue.length-1;
113. }
114. setBkColor(rvalue,highlightindex,"#ADD8E6");
115. setContent(rvalue,highlightindex);
116. }
117.
22、 //向下
118. if(mykeyCode==40){
119. if(highlightindex!=rvalue.length){
120. setBkColor(rvalue,highlightindex,"white");
121. highlightindex++;
122.
23、 }
123. if(highlightindex==rvalue.length){
124. setBkColor(rvalue,highlightindex,"white");
125. highlightindex=0;
126. }
127.
24、 setBkColor(rvalue,highlightindex,"#ADD8E6");
128. setContent(rvalue,highlightindex);
129. }
130. }
131. //回车键
132. if(mykeyCode==13){
133.
25、 if(highlightindex!=-1){
134. setContent(rvalue,highlightindex);
135. highlightindex=-1;
136. autonode.hide();
137. }else{
138. alert($("#content").v
26、al());
139. }
140. }
141. }
142. }
143. );//键盘抬起
144.
145. //当文本框失去焦点时的做法
146. inputItem.focusout(
147. function(){
148. //隐藏提示框
149.
27、 autonode.hide();
150. }
151. );
152.
153. }
154. );//reday
//高亮索引
var highlightindex=-1;
var timeDelay;
//设置文本框的内容
function setContent(con,index){
var context=con.eq(index).text();
$("#content").val(context);
}
//设置背景颜色
function setB
28、kColor(con,index,color){
con.eq(index).css("background-color",color);
}
$(document).ready(
function(){
//获得输入框节点
var inputItem=$("#content");
var inputOffset=inputItem.offset();
var autonode=$("#auto");
//设置提示框隐藏
autonode.hide().css("border","1px black solid").css("position
29、","absolute")
.css("top",inputOffset.top+inputItem.height()+5+"px")
.css("left",inputOffset.left+"px").width(inputItem.width()+"px");
//当键盘抬起时触发事件执行访问服务器业务
$("#content").keyup(
function(event){
var myevent=event||window.event;
var mykeyCode=myevent.keyCode;
//字母，退
30、格，删除，空格
if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){
//清除上一次的内容
autonode.html(" ");
//获得文本框内容
var word=$("#content").val();
if(word!=""){
function mydeal(){
//将文本框的内容发到服务器
$.post("Autocomplete",{wordtext:encod
31、eURI(word)},
function(data){
var wordNodes=data;
$.each(data,
function(i){
//拼接返回数据
var newNode=$("
").html(data[i]).attr("id",i).addClass("pro");
//将返回内容附加到页面
newNode.appendTo(autonode);
//处理鼠标事件
va
32、r con=$("#auto").children("div");
//鼠标经过
newNode.mouseover(
function(){
if(highlightindex!=-1){
setBkColor(con,highlightindex,"white");
}
highlightindex=$(this).attr("id");
$(this).css("background-color","#AD
33、D8E6");
setContent(con,highlightindex);
}
);
//鼠标离开
newNode.mouseout(
function(){
$(this).css("background-color","white");
}
);
//鼠标点击
newNode.click(
function(){
34、 setContent(con,highlightindex);
highlightindex=-1;
autonode.hide();
}
);
}
); //each
//当返回的数据长度大于0才显示
if(wordNodes.length>0){
autonode.show();
}else{
autonode.hide();
}
35、 }
,"json");//post
}
//取消上次提交
clearTimeout(timeDelay);
//延迟提交，这边设置的为200ms
timeDelay=setTimeout(
mydeal,200); //settimeout
}else{
autonode.hide();
highlightindex=-1;
}
}else{
//alert();
//获得返回框中的值
36、 var rvalue=$("#auto").children("div");
//上下键
if(mykeyCode==38||mykeyCode==40){
//向上
if(mykeyCode==38){
if(highlightindex!=-1){
setBkColor(rvalue,highlightindex,"white");
highlightindex--;
}
if(highlightindex==-1){
setBk
37、Color(rvalue,highlightindex,"white");
highlightindex=rvalue.length-1;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
//向下
if(mykeyCode==40){
if(highlightindex!=rvalue.length){
setBkColor(rvalu
38、e,highlightindex,"white");
highlightindex++;
}
if(highlightindex==rvalue.length){
setBkColor(rvalue,highlightindex,"white");
highlightindex=0;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
39、
}
//回车键
if(mykeyCode==13){
if(highlightindex!=-1){
setContent(rvalue,highlightindex);
highlightindex=-1;
autonode.hide();
}else{
alert($("#content").val());
}
}
}
}
);//键盘抬起
//当文本框失去焦点时的做法
inputItem.foc
40、usout(
function(){
//隐藏提示框
autonode.hide();
}
);
}
);//reday
Servlet:
Java代码
1. /**
2. * @author :LYL
3. *@date:2011-4-21,下午11:15:29
4. */
5. package com.lyl.service;
6.
7. import java.io.IOException;
8. import java.io.PrintWriter;
9. im
41、port .URLDecoder;
10. import java.util.ArrayList;
11. import java.util.List;
12. import javax.servlet.ServletException;
13. import javax.servlet.http.HttpServlet;
14. import javax.servlet.http.HttpServletRequest;
15. import javax.servlet.http.HttpServletResponse;
16. import java
42、x.xml.parsers.DocumentBuilder;
17. import javax.xml.parsers.DocumentBuilderFactory;
18. import javax.xml.parsers.ParserConfigurationException;
19. import net.sf.json.JSONArray;
20. import org.w3c.dom.Document;
21. import org.w3c.dom.Node;
22. import org.w3c.dom.NodeList;
23. imp
43、ort org.xml.sax.SAXException;
24.
25. public class Autocomplete extends HttpServlet {
26.
27. public void doPost(HttpServletRequest request, HttpServletResponse response)
28. throws ServletException, IOException {
29. response.setContentType("text/html");
30.
44、 response.setCharacterEncoding("utf-8");
31. PrintWriter out = response.getWriter();
32. String path = request.getContextPath();
33. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
34. String
45、userword=URLDecoder.decode(request.getParameter("wordtext"),"utf-8");
35. List results=getResultList(userword, basePath);
36. JSONArray ja=JSONArray.fromObject(results);
37. out.println(ja.toString());
38. out.flush();
39. out.close();
46、
40. }
41.
42. /**
43. * 获得匹配的字母，返回List类型
44. * @return
45. */
46. private static List getResultList(String userword,String path){
47. DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();
48. List resultlis
47、t=new ArrayList();
49. try {
50. DocumentBuilder db=dbf.newDocumentBuilder();
51. Document document=db.parse(path+"/Words.xml");
52. NodeList words=document.getElementsByTagName("word");
53. int length=words.getLength();
48、
54. for(int i=0;i49、{
60. resultlist.add(result);
61. }
62. }
63. } catch (ParserConfigurationException e) {
64. e.printStackTrace();
65. } catch (SAXException e) {
66. e.printStackTrace();
67. } catch (IOException e) {
68. e.printStackTrace();
69. }
70. return resultlist;
71. }
72.
73. }
/**
* @author :LYL
*@date:2011-4-21,下午11:15:29
*/
package com.lyl.service;
import java.io.IOException;
import java.io.PrintWriter;
impor
浙ICP备2021020529号-1 | 浙B2-20240490 
