`

JQuery自动补全

 
阅读更多

(本文转自:http://daishuanglong.iteye.com/blog/788199)

 

  1. 1.服务器端代码：   
  2.   
  3. （1）AutoCompleteServlet.java源代码：   
  4. Java代码   
  5. package servlet;     
  6.     
  7. import java.io.IOException;     
  8.     
  9. import javax.servlet.ServletException;     
  10. import javax.servlet.http.HttpServlet;     
  11. import javax.servlet.http.HttpServletRequest;     
  12. import javax.servlet.http.HttpServletResponse;     
  13.     
  14. /**   
  15.  * 接收客户端请求   
  16.  * @author 大鹏   
  17.  */    
  18. public class AutoCompleteServlet extends HttpServlet {     
  19.     
  20.     public void doGet(HttpServletRequest request, HttpServletResponse response)     
  21.             throws ServletException, IOException {     
  22.         //表示页面传过来的字符串，用于和服务器端的单词进行完整匹配     
  23.         String word = request.getParameter("word");     
  24.         //将字符串保存在request作用域中     
  25.         request.setAttribute("word", word);     
  26.         //将请求转发给视图层(注意AJAX,这个所谓的视图层不返回页面，只返回数据，所以也可以称作一个数据层)     
  27.         request.getRequestDispatcher("wordxml.jsp").forward(request, response);     
  28.     }     
  29.     
  30.     public void doPost(HttpServletRequest request, HttpServletResponse response)     
  31.             throws ServletException, IOException {     
  32.         doGet(request, response);     
  33.     }     
  34. }    
  35.   
  36. package servlet;  
  37.   
  38. import java.io.IOException;  
  39.   
  40. import javax.servlet.ServletException;  
  41. import javax.servlet.http.HttpServlet;  
  42. import javax.servlet.http.HttpServletRequest;  
  43. import javax.servlet.http.HttpServletResponse;  
  44.   
  45. /** 
  46.  * 接收客户端请求 
  47.  * @author 大鹏 
  48.  */  
  49. public class AutoCompleteServlet extends HttpServlet {  
  50.   
  51.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  52.             throws ServletException, IOException {  
  53.         //表示页面传过来的字符串，用于和服务器端的单词进行完整匹配  
  54.         String word = request.getParameter("word");  
  55.         //将字符串保存在request作用域中  
  56.         request.setAttribute("word", word);  
  57.         //将请求转发给视图层(注意AJAX,这个所谓的视图层不返回页面，只返回数据，所以也可以称作一个数据层)  
  58.         request.getRequestDispatcher("wordxml.jsp").forward(request, response);  
  59.     }  
  60.   
  61.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  62.             throws ServletException, IOException {  
  63.         doGet(request, response);  
  64.     }  
  65. }  
  66.   
  67. （2）wordxml.jsp源代码：   
  68. Jsp代码   
  69. <!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->     
  70. <%@ page import="java.util.*" contentType="text/xml; charset=UTF-8"%>     
  71. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>     
  72. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>     
  73. <!-- 返回xml数据的"视图层"暂时不做任何逻辑，先将所有单词都返回，     
  74. 待前后台应用可以协作之后，再限制返回的内容 -->     
  75. <%     
  76.     //页面段传送的字符串     
  77.     String word = (String)request.getAttribute("word");     
  78.     String[] words = {"absolute", "anyone", "anything", "apple", "abandon", "breach", "break", "boolean"};     
  79.     request.setAttribute("list", Arrays.asList(words));     
  80. %>     
  81. <words>     
  82.     <c:forEach items="${list}" var="aWord">     
  83.         <c:if test="${fn:startsWith(aWord, word)}">     
  84.             <word><c:out value="${aWord}"></c:out></word>     
  85.         </c:if>     
  86.     </c:forEach>     
  87. </words>    
  88.   
  89. <!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->  
  90. <%@ page import="java.util.*" contentType="text/xml; charset=UTF-8"%>  
  91. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
  92. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
  93. <!-- 返回xml数据的"视图层"暂时不做任何逻辑，先将所有单词都返回，  
  94. 待前后台应用可以协作之后，再限制返回的内容 -->  
  95. <%  
  96.     //页面段传送的字符串  
  97.     String word = (String)request.getAttribute("word");  
  98.     String[] words = {"absolute", "anyone", "anything", "apple", "abandon", "breach", "break", "boolean"};  
  99.     request.setAttribute("list", Arrays.asList(words));  
  100. %>  
  101. <words>  
  102.     <c:forEach items="${list}" var="aWord">  
  103.         <c:if test="${fn:startsWith(aWord, word)}">  
  104.             <word><c:out value="${aWord}"></c:out></word>  
  105.         </c:if>  
  106.     </c:forEach>  
  107. </words>  
  108. 2.客户端程序   
  109.   
  110. （1）JQueryAuto.html源代码   
  111. Html代码   
  112. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  113. <html>    
  114.     <head>    
  115.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
  116.         <script type="text/javascript" src="js/jquery-1.3.2.js"></script>    
  117.         <script type="text/javascript" src="js/jqueryauto.js"></script>    
  118.         <title>JQuery实例5：仿Google Suggest自动补齐</title>    
  119.     </head>    
  120.              
  121.     <body>    
  122.         自动补完实例：<input type="text" id="word" />    
  123.         <input type="button" value="提示" /><br />    
  124.         <div id="auto"></div>    
  125.     </body>    
  126. </html>    
  127.   
  128. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  129. <html>  
  130.     <head>  
  131.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  132.         <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
  133.         <script type="text/javascript" src="js/jqueryauto.js"></script>  
  134.         <title>JQuery实例5：仿Google Suggest自动补齐</title>  
  135.     </head>  
  136.           
  137.     <body>  
  138.         自动补完实例：<input type="text" id="word" />  
  139.         <input type="button" value="提示" /><br />  
  140.         <div id="auto"></div>  
  141.     </body>  
  142. </html>  
  143. （2）jqueryauto.js源代码：   
  144. Js代码   
  145. $(document).ready(function() {     
  146.     //下拉列表框的块标记     
  147.     var autoNode = $("#auto");     
  148.     var wordInput = $("#word");     
  149.     //表示当前高亮的节点     
  150.     var highlightindex = -1;     
  151.     var timeoutId;     
  152.     //获取匹配元素在当前视口的相对偏移。     
  153.     //返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。     
  154.          
  155.     var wordInputOffset = wordInput.offset();     
  156.     //自动补全框开始应该隐藏起来     
  157.     autoNode.hide().css("border", "1px black solid").css("position", "absolute")     
  158.                     .css("top", wordInputOffset.top + wordInput.height() + 5 + "px")     
  159.                     .css("left", wordInputOffset.left + "px")     
  160.                     .width(wordInput.width() + 2);     
  161.                          
  162.     //给文本框添加键盘按下并弹起的事件     
  163.     wordInput.keyup(function(event) {     
  164.         //处理文本框中的键盘事件     
  165.         //如果输入的是字母，应该将文本框中最新的信息发送给服务器     
  166.         var myEvent = event || window.event;     
  167.         var keyCode = myEvent.keyCode;     
  168.         //如果输入的是字母，应该将文本框中最新的信息发送给服务器     
  169.         //如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器     
  170.         if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 48){     
  171.             //1.首先获取文本框中的内容     
  172.             var wordText = wordInput.val();     
  173.             //如果内容不为空     
  174.             if (wordText != "") {     
  175.                 //对上次未完成的延时操作进行取消     
  176.                 clearTimeout(timeoutId);     
  177.                 timeoutId = setTimeout(function() {     
  178.                     $.post("AutoCompleteServlet", {word:wordText}, function(data) {     
  179.                         //将dom对象data转换成JQuery的对象     
  180.                         var jqueryObj = $(data);     
  181.                         //找到所有的word节点     
  182.                         var wordNodes = jqueryObj.find("word");     
  183.                         //需要清空auto的内容     
  184.                         autoNode.html("");     
  185.                         //遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中     
  186.                         wordNodes.each(function(i) {     
  187.                             //获取单词内容     
  188.                             var wordNode = $(this);     
  189.                             //新建div节点，将单词内容加入到新建的节点中     
  190.                             //将新建的节点加入到弹出框的节点中     
  191.                             var newDivNode = $("<div>");     
  192.                             newDivNode.html(wordNode.text()).appendTo(autoNode);     
  193.                             //鼠标进入事件，高亮节点     
  194.                             newDivNode.mouseover(function() {     
  195.                                 // 将原来的结果取消高亮     
  196.                                 if (highlightindex != -1) {     
  197.                                     autoNode.children("div").eq(highlightindex)     
  198.                                         .css("background-color", "white");     
  199.                                 }     
  200.                                 //记录新的高亮索引     
  201.                                 highlightindex = i;     
  202.                                 //鼠标进入的节点高亮     
  203.                                 $(this).css("background-color", "red");     
  204.                             });     
  205.                             //增加鼠标移出事件，取消当前节点的高亮     
  206.                             newDivNode.mouseout(function() {     
  207.                                 //取消鼠标移出节点的高亮     
  208.                                 $(this).css("background-color", "white");     
  209.                             });     
  210.                             //增加鼠标点击事件，可以进行补齐     
  211.                             newDivNode.click(function() {     
  212.                                 //取出高亮节点的文本内容     
  213.                                 var comText = autoNode.hide().children("div").eq(highlightindex).text();     
  214.                                 highlightindex = -1;     
  215.                                 //文本框中的内容变成高亮节点的内容     
  216.                                 $("#word").val(comText);     
  217.                             });     
  218.                         });     
  219.                         //如果服务器没有数据返回，则显示弹出框     
  220.                         if(wordNodes.length > 0) {     
  221.                             autoNode.show();     
  222.                         } else {     
  223.                             autoNode.hide();     
  224.                         }     
  225.                     },"xml");     
  226.                 }, 200);     
  227.                      
  228.             } else {     
  229.                 autoNode.hide();     
  230.                 //弹出框隐藏的同时，高亮节点索引值也置为-1     
  231.                 highlightindex = -1;     
  232.             }     
  233.         } else if (keyCode == 38 || keyCode == 40) {     
  234.             // 如果输入的是向上38向下40按键     
  235.             if (keyCode == 38) {     
  236.                 //向上     
  237.                 var autoNodes = autoNode.children("div");     
  238.                 if (highlightindex != -1) {     
  239.                     //如果原来存在高亮节点，则将背景色改成白色     
  240.                     autoNodes.eq(highlightindex).css("background-color", "white");     
  241.                     highlightindex --;     
  242.                 }     
  243.                 if (highlightindex == -1) {     
  244.                     //如果修改索引值以后index变成-1,则将索引值指向最后一个元素     
  245.                     highlightindex = autoNodes.length -1;     
  246.                 }     
  247.                 //让现在高亮的内容变成红色     
  248.                 autoNodes.eq(highlightindex).css("background-color", "red");     
  249.             } else {     
  250.                 //向下     
  251.                 var autoNodes = autoNode.children("div");     
  252.                 if (highlightindex != -1) {     
  253.                     //如果原来存在高亮节点，则将背景色改成白色     
  254.                     autoNodes.eq(highlightindex).css("background-color", "white");     
  255.                 }     
  256.                 highlightindex ++;     
  257.                 if (highlightindex == autoNodes.length) {     
  258.                     //如果修改索引值以后index变成节点的长度,则将索引值指向第一个元素     
  259.                     highlightindex = 0;     
  260.                 }     
  261.                 //让现在高亮的内容变成红色     
  262.                 autoNodes.eq(highlightindex).css("background-color", "red");     
  263.             }     
  264.                  
  265.         } else if (keyCode == 13) {     
  266.             // 如果输入的是回车     
  267.             // 下拉框有高亮内容     
  268.             if (highlightindex != -1) {     
  269.                 //取出高亮节点的文本内容     
  270.                 var comText = autoNode.hide().children("div").eq(highlightindex).text();     
  271.                 highlightindex = -1;     
  272.                 //文本框中的内容变成高亮节点的内容     
  273.                 $("#word").val(comText);     
  274.             } else {     
  275.                 //下拉框没有高亮内容     
  276.                 alert("文本框中的[" + wordInput.val() + "]被提交了");     
  277.                 autoNode.hide();     
  278.                 //让文本框失去焦点     
  279.                 wordInput.get(0).blur();     
  280.             }     
  281.         }     
  282.     });     
  283.          
  284.     $("input[type='button']").click(function() {     
  285.         alert("文本框中的[" + wordInput.val() + "]被提交了");     
  286.     });     
  287.          
  288. });    
  289.   
  290. $(document).ready(function() {  
  291.     //下拉列表框的块标记  
  292.     var autoNode = $("#auto");  
  293.     var wordInput = $("#word");  
  294.     //表示当前高亮的节点  
  295.     var highlightindex = -1;  
  296.     var timeoutId;  
  297.     //获取匹配元素在当前视口的相对偏移。  
  298.     //返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。  
  299.       
  300.     var wordInputOffset = wordInput.offset();  
  301.     //自动补全框开始应该隐藏起来  
  302.     autoNode.hide().css("border", "1px black solid").css("position", "absolute")  
  303.                     .css("top", wordInputOffset.top + wordInput.height() + 5 + "px")  
  304.                     .css("left", wordInputOffset.left + "px")  
  305.                     .width(wordInput.width() + 2);  
  306.                       
  307.     //给文本框添加键盘按下并弹起的事件  
  308.     wordInput.keyup(function(event) {  
  309.         //处理文本框中的键盘事件  
  310.         //如果输入的是字母，应该将文本框中最新的信息发送给服务器  
  311.         var myEvent = event || window.event;  
  312.         var keyCode = myEvent.keyCode;  
  313.         //如果输入的是字母，应该将文本框中最新的信息发送给服务器  
  314.         //如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器  
  315.         if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 48){  
  316.             //1.首先获取文本框中的内容  
  317.             var wordText = wordInput.val();  
  318.             //如果内容不为空  
  319.             if (wordText != "") {  
  320.                 //对上次未完成的延时操作进行取消  
  321.                 clearTimeout(timeoutId);  
  322.                 timeoutId = setTimeout(function() {  
  323.                     $.post("AutoCompleteServlet", {word:wordText}, function(data) {  
  324.                         //将dom对象data转换成JQuery的对象  
  325.                         var jqueryObj = $(data);  
  326.                         //找到所有的word节点  
  327.                         var wordNodes = jqueryObj.find("word");  
  328.                         //需要清空auto的内容  
  329.                         autoNode.html("");  
  330.                         //遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中  
  331.                         wordNodes.each(function(i) {  
  332.                             //获取单词内容  
  333.                             var wordNode = $(this);  
  334.                             //新建div节点，将单词内容加入到新建的节点中  
  335.                             //将新建的节点加入到弹出框的节点中  
  336.                             var newDivNode = $("<div>");  
  337.                             newDivNode.html(wordNode.text()).appendTo(autoNode);  
  338.                             //鼠标进入事件，高亮节点  
  339.                             newDivNode.mouseover(function() {  
  340.                                 // 将原来的结果取消高亮  
  341.                                 if (highlightindex != -1) {  
  342.                                     autoNode.children("div").eq(highlightindex)  
  343.                                         .css("background-color", "white");  
  344.                                 }  
  345.                                 //记录新的高亮索引  
  346.                                 highlightindex = i;  
  347.                                 //鼠标进入的节点高亮  
  348.                                 $(this).css("background-color", "red");  
  349.                             });  
  350.                             //增加鼠标移出事件，取消当前节点的高亮  
  351.                             newDivNode.mouseout(function() {  
  352.                                 //取消鼠标移出节点的高亮  
  353.                                 $(this).css("background-color", "white");  
  354.                             });  
  355.                             //增加鼠标点击事件，可以进行补齐  
  356.                             newDivNode.click(function() {  
  357.                                 //取出高亮节点的文本内容  
  358.                                 var comText = autoNode.hide().children("div").eq(highlightindex).text();  
  359.                                 highlightindex = -1;  
  360.                                 //文本框中的内容变成高亮节点的内容  
  361.                                 $("#word").val(comText);  
  362.                             });  
  363.                         });  
  364.                         //如果服务器没有数据返回，则显示弹出框  
  365.                         if(wordNodes.length > 0) {  
  366.                             autoNode.show();  
  367.                         } else {  
  368.                             autoNode.hide();  
  369.                         }  
  370.                     },"xml");  
  371.                 }, 200);  
  372.                   
  373.             } else {  
  374.                 autoNode.hide();  
  375.                 //弹出框隐藏的同时，高亮节点索引值也置为-1  
  376.                 highlightindex = -1;  
  377.             }  
  378.         } else if (keyCode == 38 || keyCode == 40) {  
  379.             // 如果输入的是向上38向下40按键  
  380.             if (keyCode == 38) {  
  381.                 //向上  
  382.                 var autoNodes = autoNode.children("div");  
  383.                 if (highlightindex != -1) {  
  384.                     //如果原来存在高亮节点，则将背景色改成白色  
  385.                     autoNodes.eq(highlightindex).css("background-color", "white");  
  386.                     highlightindex --;  
  387.                 }  
  388.                 if (highlightindex == -1) {  
  389.                     //如果修改索引值以后index变成-1,则将索引值指向最后一个元素  
  390.                     highlightindex = autoNodes.length -1;  
  391.                 }  
  392.                 //让现在高亮的内容变成红色  
  393.                 autoNodes.eq(highlightindex).css("background-color", "red");  
  394.             } else {  
  395.                 //向下  
  396.                 var autoNodes = autoNode.children("div");  
  397.                 if (highlightindex != -1) {  
  398.                     //如果原来存在高亮节点，则将背景色改成白色  
  399.                     autoNodes.eq(highlightindex).css("background-color", "white");  
  400.                 }  
  401.                 highlightindex ++;  
  402.                 if (highlightindex == autoNodes.length) {  
  403.                     //如果修改索引值以后index变成节点的长度,则将索引值指向第一个元素  
  404.                     highlightindex = 0;  
  405.                 }  
  406.                 //让现在高亮的内容变成红色  
  407.                 autoNodes.eq(highlightindex).css("background-color", "red");  
  408.             }  
  409.               
  410.         } else if (keyCode == 13) {  
  411.             // 如果输入的是回车  
  412.             // 下拉框有高亮内容  
  413.             if (highlightindex != -1) {  
  414.                 //取出高亮节点的文本内容  
  415.                 var comText = autoNode.hide().children("div").eq(highlightindex).text();  
  416.                 highlightindex = -1;  
  417.                 //文本框中的内容变成高亮节点的内容  
  418.                 $("#word").val(comText);  
  419.             } else {  
  420.                 //下拉框没有高亮内容  
  421.                 alert("文本框中的[" + wordInput.val() + "]被提交了");  
  422.                 autoNode.hide();  
  423.                 //让文本框失去焦点  
  424.                 wordInput.get(0).blur();  
  425.             }  
  426.         }  
  427.     });  
  428.       
  429.     $("input[type='button']").click(function() {  
  430.         alert("文本框中的[" + wordInput.val() + "]被提交了");  
  431.     });  
  432.       
  433. });  
  434.   
  435. 好了，现在所有的代码已经完成，看一下运行效果吧。   

分享到：
| MySQL忘记密码的正确解决方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics