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

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

2、t()的问题，大家在服务器端加个打印输出一下，我们会发现时延并没有起到效果。好了，这次我就不上源码了，也不上图了，直接上修复过 的代码，和使用 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.

3、 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

4、(“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. va

5、r mykeyCode=myevent.keyCode; 31. 32. /字母，退格，删除，空格 33. if(mykeyCode=65 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. high

6、lightindex=$(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,highlight

7、index); 73. highlightindex=-1; 74. autonode.hide(); 75. 76. ); 77. 78. ); /each 79. 80. /当返回的数据长度大于 0 才显示81. if(wordNodes.length0) 82. autonode.show(); 83. else 84. autonode.hide(); 85. 86. 87. ,“json“);/post 88. 89. /取消上次提交 90. clearTimeout(timeDelay); 91. /延迟提交，这边设置的为 200ms 92. timeDelay=setTimeou

8、t( 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,hig

9、hlightindex,“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(

10、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,highlig

11、htindex); 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. funct

12、ion() 148. /隐藏提示框 149. autonode.hide(); 150. 151. ); 152. 153. 154. );/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;

13、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.DocumentBuilderFac

14、tory; 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 do

15、Post(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 =

16、request.getScheme()+“:/“+request.getServerName()+“:“+request.getServerPort()+path+“/“; 34. String 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

17、. out.flush(); 39. out.close(); 40. 41. 42. /* 43. * 获得匹配的字母，返回 List 类型 44. * return 45. */ 46. private static List getResultList(String userword,String path) 47. DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance(); 48. List resultlist=new ArrayList(); 49. try 50. DocumentBuilder db=dbf.

18、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;ilength;i+) 55. Node node=words.item(i); 56. /获得字母 57. String result=node.getFirstChild().getNodeValue(); 58. /这边进行一些逻辑处

19、理，字符串的匹配，（后续工作） 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. 效果同样实现，大家可以修改试试，要引的包大家在下面下载：http:/