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

上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互使用XML做的，XML的传输是十分耗带宽的，用于我们这些做着玩的还可以，但是 一旦数据量大起来他就相当的不给力了，所以我想使用JSON格式的数据传输，这样应该会好很多，说实话，之前知道有JSON，但是没学过啊，所以只好先学 学JSON，至于JSON如何用我就不介绍了，大家网上搜搜到处都是，如果有什么搜不到的可以给我留言，虽然我不精通，但是基本使用还是能够应付的。好了，言归正传，说说我们这次的主题，这次修复的BUG是什么呢？有童鞋发现了吗？，好吧，没发现也没关系，因为我自己也是这次才发现。那就是 setTimeout()的问题，大家在服务器端加个打印输出一下，我们会发现时延并没有起到效果。好了，这次我就不上源码了，也不上图了，直接上修复过 的代码，和使用JSON的部分。注意哦，要加上json.js，和一个JSON包，这个我打包给大家上传。JS:Java代码 1. /高亮索引2. varhighlightindex=-1;3. vartimeDelay;4. /设置文本框的内容5. functionsetContent(con,index)6. varcontext=con.eq(index).text();7. $(#content).val(context);8. 9. 10. /设置背景颜色11. functionsetBkColor(con,index,color)12. con.eq(index).css(background-color,color);13. 14. 15. $(document).ready(16. function()17. /获得输入框节点18. varinputItem=$(#content);19. varinputOffset=inputItem.offset();20. varautonode=$(#auto);21. /设置提示框隐藏22. autonode.hide().css(border,1pxblacksolid).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. varmyevent=event|window.event;30. varmykeyCode=myevent.keyCode;31. 32. /字母，退格，删除，空格33. if(mykeyCode=65&mykeyCode=90|mykeyCode=8|mykeyCode=46|mykeyCode=32)34. /清除上一次的内容35. autonode.html();36. /获得文本框内容37. varword=$(#content).val();38. if(word!=)39. functionmydeal()40. /将文本框的内容发到服务器41. $.post(Autocomplete,wordtext:encodeURI(word),42. function(data)43. varwordNodes=data;44. $.each(data,45. function(i)46. /拼接返回数据47. varnewNode=$().html(datai).attr(id,i).addClass(pro);48. /将返回内容附加到页面49. newNode.appendTo(autonode);50. /处理鼠标事件51. varcon=$(#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. );/each79. 80. /当返回的数据长度大于0才显示81. if(wordNodes.length0)82. autonode.show();83. else84. autonode.hide();85. 86. 87. ,json);/post88. 89. /取消上次提交90. clearTimeout(timeDelay);91. /延迟提交，这边设置的为200ms92. timeDelay=setTimeout(93. mydeal,200);/settimeout94. else95. autonode.hide();96. highlightindex=-1;97. 98. else99. /alert();100. /获得返回框中的值101. varrvalue=$(#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. else138. 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=$().html(datai).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.length0)autonode.show();elseautonode.hide();,json);/post/取消上次提交clearTimeout(timeDelay);/延迟提交，这边设置的为200mstimeDelay=setTimeout(mydeal,200); /settimeoutelseautonode.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();elsealert($(#content).val(););/键盘抬起/当文本框失去焦点时的做法inputItem.focusout(function()/隐藏提示框autonode.hide();););/redayServlet:Java代码 1. /*2. *author:LYL3. *date:2011-4-21,下午11:15:294. */5. packagecom.lyl.service;6. 7. importjava.io.IOException;8. importjava.io.PrintWriter;9. .URLDecoder;10. importjava.util.ArrayList;11. importjava.util.List;12. importjavax.servlet.ServletException;13. importjavax.servlet.http.HttpServlet;14. importjavax.servlet.http.HttpServletRequest;15. importjavax.servlet.http.HttpServletResponse;16. importjavax.xml.parsers.DocumentBuilder;17. importjavax.xml.parsers.DocumentBuilderFactory;18. importjavax.xml.parsers.ParserConfigurationException;19. importnet.sf.json.JSONArray;20. importorg.w3c.dom.Document;21. importorg.w3c.dom.Node;22. importorg.w3c.dom.NodeList;23. importorg.xml.sax.SAXException;24. 25. publicclassAutocompleteextendsHttpServlet26. 27. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)28. throwsServletException,IOException29. response.setContentType(text/html);30. response.setCharacterEncoding(utf-8);31. PrintWriterout=response.getWriter();32. Stringpath=request.getContextPath();33. StringbasePath=request.getScheme()+:/+request.getServerName()+:+request.getServerPort()+path+/;34. Stringuserword=URLDecoder.decode(request.getParameter(wordtext),utf-8);35. Listresults=getResultList(userword,basePath);36. JSONArrayja=JSONArray.fromObject(results);37. out.println(ja.toString();38. out.flush();39. out.close();40. 41. 42. /*43. *获得匹配的字母，返回List类型44. *return45. */46. privatestaticListgetResultList(Stringuserword,Stringpath)47. DocumentBuilderFactorydbf=DocumentBuilderFactory.newInstance();48. Listresultlist=newArrayList();49. try50. DocumentBuilderdb=dbf.newDocumentBuilder();51. Documentdocument=db.parse(path+/Words.xml);52. NodeListwords=document.getElementsByTagName(word);53. intlength=words.getLength();54. for(inti=0;ilength;i+)55. Nodenode=words.item(i);56. /获得字母57. Stringresult=node.getFirstChild().getNodeValue();58. /这边进行一些逻辑处理，字符串的匹配，（后续工作）59. if(result.contains(userword)60. resultlist.add(result);61. 62. 63. catch(ParserConfigurationExceptione)64. e.printStackTrace();65. catch(SAXExceptione)66. e.printStackTrace();67. catch(IOExceptione)68. e.printStackTrace();69. 70. returnresultlist;71. 72. 73. /* * author :LYL *date:2011-4-21,下午11:15:29 */package com.lyl.service;import java.io.IOException;import java.io.PrintWriter;import .URLDecoder;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.xml.parsers.DocumentBuilder;import javax.xml.parsers.DocumentBuilderFactory;import javax.xml.parsers.ParserConfigurationException;import net.sf.json.JSONArray;import org.w3c.dom.Document;import org.w3c.dom.Node;import org.w3c.dom.NodeList;import org.xml.sax.SAXException;public class Autocomplete extends HttpServlet public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setContentType(text/html);response.setCharacterEncoding(utf-8);PrintWriter out = response.getWriter();String path = request.getContextPath();String basePath = request.getScheme()+:/+request.getServ