仿百度搜索提示框jQuery自动完成

大概要实现的内容

这是一个很简单的示例,服务器端只是用了一个jsp页面,返回的类型为xml。先讲下是怎么回事,就是在浏览器端,通过ajax请求,发送一串英文字母,服务器端通过比较,返回具有相同前缀的英文单词。就这么个意思。

工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便,因为对于写javascript的话,有函数名的提示。

本例提供下载。望各位提出宝贵意见哈。

一、客户端JSP页面

Html代码 收藏代码
  1. <%--
  2. CreatedbyIntelliJIDEA.
  3. User:JayChang
  4. Date:2010-11-22
  5. Time:8:33:11
  6. TochangethistemplateuseFile|Settings|FileTemplates.
  7. --%>
  8. <%@pagecontentType="text/html;charset=UTF-8"language="java"%>
  9. <html>
  10. <head><title>AutoComplete-Sample</title>
  11. <linktype="text/css"rel="stylesheet"href="./css/default.css">
  12. <scripttype="text/javascript"src="./jslib/jquery-1.4.2.js"></script>
  13. <scripttype="text/javascript"language="javascript">
  14. //高亮的索引
  15. varhighLightIndex=-1;
  16. //超时的标识(对用户连续快速按下键盘的事件做延时处理,只对用户在500ms内最后一次请求,让其生效)
  17. vartimeoutId;
  18. $(document).ready(function(){
  19. init();
  20. $('#auto_txt').bind('keyup',processKeyup);
  21. });
  22. /**
  23. *处理键盘按下后弹起的事件
  24. *@paramevent
  25. */
  26. functionprocessKeyup(event){
  27. varmyEvent=event||windows.event;
  28. varkeyCode=myEvent.keyCode;
  29. //输入是字母,或者退格键则需要重新请求
  30. if((keyCode>=65&&keyCode<=90)||keyCode==8){
  31. //以下两行代码是为了防止用户快速输入导致频繁请求服务器
  32. //这样便可以在用户500ms内快速输入的情况下,只请求服务器一次
  33. //大大提高服务器性能
  34. highLightIndex=-1;
  35. clearTimeout(timeoutId);
  36. timeoutId=setTimeout(processAjaxRequest,500);
  37. //处理上下键(up,down)
  38. }elseif(keyCode==38||keyCode==40){
  39. processKeyUpAndDown(keyCode);
  40. //按下了回车键
  41. }elseif(keyCode==13){
  42. processEnter();
  43. }
  44. }
  45. /***
  46. *初始化弹出框列表的位置,大小
  47. */
  48. functioninit(){
  49. $('#auto_div').hide();
  50. varpos=$('#auto_txt').position();
  51. vartopPosition=pos.top+$('#auto_txt').height()+7;
  52. varleftPosition=pos.left;
  53. $('#auto_div').offset({top:topPosition,left:leftPosition});
  54. $('#auto_div').width($('#auto_txt').width());
  55. //$('#auto_div').css('position','absolute');
  56. }
  57. /**
  58. *处理Ajax请求
  59. *@paramdata
  60. */
  61. functionprocessAjaxRequest(){
  62. $.ajax({
  63. type:"post",//http请求方法,默认:"post"
  64. url:"data.jsp",//发送请求的地址
  65. data:"reqWord="+$('#auto_txt').val(),
  66. dataType:"xml",//预期服务器返回的数据类型
  67. success:processAjaxResponse
  68. });
  69. }
  70. /**
  71. *处理Ajax回复
  72. *@paramdataAjax请求得到的返回结果为dom文档对象
  73. */
  74. functionprocessAjaxResponse(data){
  75. $('#auto_div').html('').show();
  76. varxml=$(data);
  77. varwords=xml.find('word');
  78. for(vari=0;i<words.length;i++){
  79. varword_div=$('<div></div>');
  80. word_div.html(words.eq(i).text());
  81. word_div.hover(fnOver,fnOut);
  82. word_div.click(getAutoText);
  83. $('#auto_div').append(word_div);
  84. }
  85. }
  86. /**
  87. *处理鼠标滑过
  88. */
  89. functionfnOver(){
  90. //alert($(this));
  91. changeToWhite();
  92. $(this).css('background-color','pink');
  93. //alert($(this).index());
  94. highLightIndex=$(this).index();
  95. //下面一行注释掉了,百度搜索也没这功能,就是鼠标移动时,跟着改变搜索框的内容
  96. //$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
  97. }
  98. /**
  99. *处理鼠标移除
  100. */
  101. functionfnOut(){
  102. $(this).css('background-color','white');
  103. }
  104. /**
  105. *得到自动填充文本
  106. */
  107. functiongetAutoText(){
  108. //有高亮显示的则选中当前选中当前高亮的文本
  109. if(highLightIndex!=-1){
  110. $('#auto_txt').val($(this).html());
  111. $('#auto_div').html('').hide();
  112. }
  113. }
  114. /**
  115. *处理按下Enter键
  116. *@paramkeyCode
  117. */
  118. functionprocessEnter(){
  119. if(highLightIndex!=-1){
  120. $('auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
  121. $('#auto_div').html('').hide();
  122. }
  123. }
  124. /**
  125. *处理按上下键的情况
  126. */
  127. functionprocessKeyUpAndDown(keyCode){
  128. varwords=$('#auto_div').children();
  129. varnum=words.length;
  130. if(num<=0)return;
  131. changeToWhite();
  132. highLightIndex=((keyCode!=38?num+1:num-1)+highLightIndex)%num;
  133. words.eq(highLightIndex).css('background-color','pink');
  134. $('#auto_txt').val(words.eq(highLightIndex).html());
  135. }
  136. /**
  137. *如果有高亮的则把高亮变白
  138. */
  139. functionchangeToWhite(){
  140. if(highLightIndex!=-1){
  141. $('#auto_div').children().eq(highLightIndex).css('background-color','white');
  142. }
  143. }
  144. </script>
  145. </head>
  146. <body>
  147. 自动完成示例<inputtype="text"id="auto_txt"><inputtype="button"value="提交">
  148. <divstyle="border-width:1px;"id="auto_div"></div>
  149. </body>
  150. </html>

二、作为服务器端的JSP,返回的是XML

这里稍作解释,为了方便起见,在服务器端只是很简单的处理,返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理,本例主要还是侧重于浏览器端的JavaScript。

Html代码 收藏代码
  1. <%--
  2. CreatedbyIntelliJIDEA.
  3. User:JayChang
  4. Date:2010-11-22
  5. Time:8:33:22
  6. TochangethistemplateuseFile|Settings|FileTemplates.
  7. --%>
  8. <%@pagecontentType="text/xml;charset=UTF-8"%>
  9. <%
  10. StringreqWord=request.getParameter("reqWord");
  11. System.out.println(reqWord);
  12. %>
  13. <words>
  14. <%if("absolute".startsWith(reqWord)){%>
  15. <word>absolute</word>
  16. <%}%>
  17. <%if("air".startsWith(reqWord)){%>
  18. <word>air</word>
  19. <%}%>
  20. <%if("apple".startsWith(reqWord)){%>
  21. <word>apple</word>
  22. <%}%>
  23. <%if("amaze".startsWith(reqWord)){%>
  24. <word>amaze</word>
  25. <%}%>
  26. <%if("bat".startsWith(reqWord)){%>
  27. <word>bat</word>
  28. <%}%>
  29. <%if("bicycle".startsWith(reqWord)){%>
  30. <word>bicycle</word>
  31. <%}%>
  32. <%if("bite".startsWith(reqWord)){%>
  33. <word>bite</word>
  34. <%}%>
  35. <%if("bottle".startsWith(reqWord)){%>
  36. <word>bottle</word>
  37. <%}%>
  38. <%if("cat".startsWith(reqWord)){%>
  39. <word>cat</word>
  40. <%}%>
  41. <%if("carry".startsWith(reqWord)){%>
  42. <word>carry</word>
  43. <%}%>
  44. <%if("castle".startsWith(reqWord)){%>
  45. <word>castle</word>
  46. <%}%>
  47. </words>

三、CSS样式

Html代码 收藏代码
  1. #auto_div{
  2. position:absolute;
  3. border-width:1px;
  4. border:1px#808080solid;
  5. }

你可能感兴趣的:(jquery)