仿百度,谷歌输入框自动提示功能---JSON版.doc

上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互使用XML做的，XML的传输是十分耗带宽的，用于我们这些做着玩的还可以，但是 一旦数据量大起来他就相当的不给力了，所以我想使用JSON格式的数据传输，这样应该会好很多，说实话，之前知道有JSON，但是没学过啊，所以只好先学 学JSON，至于JSON如何用我就不介绍了，大家网上搜搜到处都是，如果有什么搜不到的可以给我留言，虽然我不精通，但是基本使用还是能够应付的。

好了，言归正传，说说我们这次的主题，这次修复的BUG是什么呢？有童鞋发现了吗？，好吧，没发现也没关系，因为我自己也是这次才发现。那就是 setTimeout()的问题，大家在服务器端加个打印输出一下，我们会发现时延并没有起到效果。好了，这次我就不上源码了，也不上图了，直接上修复过 的代码，和使用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.     $("#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");  
19.         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",inputOffset.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.                 //字母，退格，删除，空格  
33.                 if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){  
34.                     //清除上一次的内容  
35.                     autonode.html(" ");  
36.                     //获得文本框内容  
37.                     var word=$("#content").val();  
38.                     if(word!=""){  
39.                         function mydeal(){  
40.                             //将文本框的内容发到服务器  
41.                             $.post("Autocomplete",{wordtext:encodeURI(word)},  
42.                                 function(data){  
43.                                 var wordNodes=data;  
44.                                 $.each(data,  
45.                                     function(i){  
46.                                     //拼接返回数据  
47.                                     var newNode=$("<div>").html(data[i]).attr("id",i).addClass("pro");  
48.                                     //将返回内容附加到页面  
49.                                     newNode.appendTo(autonode);  
50.                                     //处理鼠标事件  
51.                                     var con=$("#auto").children("div");  
52.                                     //鼠标经过  
53.                                     newNode.mouseover(  
54.                                         function(){  
55.                                             if(highlightindex!=-1){  
56.                                                 setBkColor(con,highlightindex,"white");  
57.                                             }  
58.                                             highlightindex=$(this).attr("id");  
59.                                             $(this).css("background-color","#ADD8E6");  
60.                                             setContent(con,highlightindex);  
61.                                         }     
62.                                     );  
63.                                     //鼠标离开  
64.                                     newNode.mouseout(  
65.                                         function(){  
66.                                             $(this).css("background-color","white");  
67.                                         }     
68.                                     );  
69.                                     //鼠标点击  
70.                                     newNode.click(  
71.                                         function(){  
72.                                             setContent(con,highlightindex);  
73.                                             highlightindex=-1;  
74.                                             autonode.hide();  
75.                                         }  
76.                                     );  
77.                                 }     
78.                                 );    //each  
79.   
80.                                 //当返回的数据长度大于0才显示  
81.                                 if(wordNodes.length>0){  
82.                                     autonode.show();  
83.                                 }else{  
84.                                     autonode.hide();  
85.                                 }  
86.                             }  
87.                             ,"json");//post  
88.                         }  
89.                         //取消上次提交  
90.                         clearTimeout(timeDelay);  
91.                         //延迟提交，这边设置的为200ms  
92.                         timeDelay=setTimeout(  
93.                             mydeal,200);    //settimeout  
94.                     }else{  
95.                         autonode.hide();  
96.                         highlightindex=-1;  
97.                     }  
98.                 }else{  
99.                     //alert();  
100.                     //获得返回框中的值  
101.                     var rvalue=$("#auto").children("div");  
102.                     //上下键  
103.                     if(mykeyCode==38||mykeyCode==40){  
104.                         //向上  
105.                         if(mykeyCode==38){  
106.                             if(highlightindex!=-1){  
107.                                 setBkColor(rvalue,highlightindex,"white");  
108.                                 highlightindex--;  
109.                             }  
110.                             if(highlightindex==-1){  
111.                                 setBkColor(rvalue,highlightindex,"white");  
112.                                 highlightindex=rvalue.length-1;  
113.                             }  
114.                             setBkColor(rvalue,highlightindex,"#ADD8E6");  
115.                             setContent(rvalue,highlightindex);  
116.                         }  
117.                         //向下  
118.                         if(mykeyCode==40){  
119.                             if(highlightindex!=rvalue.length){  
120.                                 setBkColor(rvalue,highlightindex,"white");  
121.                                 highlightindex++;  
122.                             }  
123.                             if(highlightindex==rvalue.length){  
124.                                 setBkColor(rvalue,highlightindex,"white");  
125.                                 highlightindex=0;  
126.                             }  
127.                             setBkColor(rvalue,highlightindex,"#ADD8E6");  
128.                             setContent(rvalue,highlightindex);  
129.                         }  
130.                     }  
131.                     //回车键  
132.                     if(mykeyCode==13){  
133.                         if(highlightindex!=-1){  
134.                             setContent(rvalue,highlightindex);  
135.                             highlightindex=-1;  
136.                             autonode.hide();  
137.                         }else{  
138.                             alert($("#content").val());  
139.                         }  
140.                     }  
141.                 }  
142.             }  
143.         );//键盘抬起  
144.   
145.         //当文本框失去焦点时的做法  
146.         inputItem.focusout(  
147.             function(){  
148.                 //隐藏提示框  
149.                 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 setBkColor(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","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;

//字母，退格，删除，空格
if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){
//清除上一次的内容
autonode.html(" ");
//获得文本框内容
var word=$("#content").val();
if(word!=""){
function mydeal(){
//将文本框的内容发到服务器
$.post("Autocomplete",{wordtext:encodeURI(word)},
function(data){
var wordNodes=data;
$.each(data,
function(i){
//拼接返回数据
var newNode=$("<div>").html(data[i]).attr("id",i).addClass("pro");
//将返回内容附加到页面
newNode.appendTo(autonode);
//处理鼠标事件
var con=$("#auto").children("div");
//鼠标经过
newNode.mouseover(
function(){
if(highlightindex!=-1){
setBkColor(con,highlightindex,"white");
}
highlightindex=$(this).attr("id");
$(this).css("background-color","#ADD8E6");
setContent(con,highlightindex);
}
);
//鼠标离开
newNode.mouseout(
function(){
$(this).css("background-color","white");
}
);
//鼠标点击
newNode.click(
function(){
setContent(con,highlightindex);
highlightindex=-1;
autonode.hide();
}
);
}
); //each

//当返回的数据长度大于0才显示
if(wordNodes.length>0){
autonode.show();
}else{
autonode.hide();
}
}
,"json");//post
}
//取消上次提交
clearTimeout(timeDelay);
//延迟提交，这边设置的为200ms
timeDelay=setTimeout(
mydeal,200); //settimeout
}else{
autonode.hide();
highlightindex=-1;
}
}else{
//alert();
//获得返回框中的值
var rvalue=$("#auto").children("div");
//上下键
if(mykeyCode==38||mykeyCode==40){
//向上
if(mykeyCode==38){
if(highlightindex!=-1){
setBkColor(rvalue,highlightindex,"white");
highlightindex--;
}
if(highlightindex==-1){
setBkColor(rvalue,highlightindex,"white");
highlightindex=rvalue.length-1;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
//向下
if(mykeyCode==40){
if(highlightindex!=rvalue.length){
setBkColor(rvalue,highlightindex,"white");
highlightindex++;
}
if(highlightindex==rvalue.length){
setBkColor(rvalue,highlightindex,"white");
highlightindex=0;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
}
//回车键
if(mykeyCode==13){
if(highlightindex!=-1){
setContent(rvalue,highlightindex);
highlightindex=-1;
autonode.hide();
}else{
alert($("#content").val());
}
}
}
}
);//键盘抬起

//当文本框失去焦点时的做法
inputItem.focusout(
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. import .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 javax.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. import 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.         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 userword=URLDecoder.decode(request.getParameter("wordtext"),"utf-8");  
35.         List<String> results=getResultList(userword, basePath);  
36.         JSONArray ja=JSONArray.fromObject(results);  
37.         out.println(ja.toString());  
38.         out.flush();  
39.         out.close();  
40.     }  
41.   
42.     /** 
43.      * 获得匹配的字母，返回List类型 
44.      * @return 
45.      */  
46.     private static List<String> getResultList(String userword,String path){  
47.         DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();  
48.         List<String> resultlist=new ArrayList<String>();  
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();  
54.             for(int i=0;i<length;i++){  
55.                 Node node=words.item(i);  
56.                 //获得字母  
57.                 String result=node.getFirstChild().getNodeValue();  
58.                 //这边进行一些逻辑处理，字符串的匹配，（后续工作）  
59.                 if(result.contains(userword)){  
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