当前位置：磊宇堂 > 值得分享 > 我的笔记 > JSP+ajax实现百度首页自动补全功能实例代码
磊宇堂 我的笔记

JSP+ajax实现百度首页自动补全功能实例代码

模仿百度首页的自动补全提示功能代码如下：

  1. <%@ page language=“java” import=“java.util.*” pageEncoding=“utf-8”%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + “://” 
  5.             + request.getServerName() + “:” + request.getServerPort()  
  6.             + path + “/”;  
  7. %>  
  8.    
  9. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  10. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  11. <head>  
  12. <title>查找</title>  
  13. <script type=“text/javascript”>  
  14.     function mSift_SeekTp(oObj, nDire) {  
  15.         var nPosition = null;  
  16.         if (oObj.getBoundingClientRect && !document.all) {  
  17.             var oDc = document.documentElement;  
  18.             switch (nDire) {  
  19.             case 0:  
  20.                 return oObj.getBoundingClientRect().top + oDc.scrollTop;  
  21.             case 1:  
  22.                 return oObj.getBoundingClientRect().right + oDc.scrollLeft;  
  23.             case 2:  
  24.                 return oObj.getBoundingClientRect().bottom + oDc.scrollTop;  
  25.             case 3:  
  26.                 return oObj.getBoundingClientRect().left + oDc.scrollLeft;  
  27.             }  
  28.         } else {  
  29.             if (nDire == 1 || nDire == 3) {  
  30.                 nPosition = oObj.offsetLeft;  
  31.             } else {  
  32.                 nPosition = oObj.offsetTop;  
  33.             }  
  34.             if (arguments[arguments.length – 1] != 0) {  
  35.                 if (nDire == 1) {  
  36.                     nPosition += oObj.offsetWidth;  
  37.                 } else if (nDire == 2) {  
  38.                     nPosition += oObj.offsetHeight;  
  39.                 }  
  40.             }  
  41.             if (oObj.offsetParent != null) {  
  42.                 nPosition += mSift_SeekTp(oObj.offsetParent, nDire, 0);  
  43.             }  
  44.             return nPosition;  
  45.         }  
  46.     }  
  47.     function mSift(cVarName, nMax) {  
  48.         this.oo = cVarName;  
  49.         this.Max = nMax;  
  50.     }  
  51.     mSift.prototype = {  
  52.         Varsion : ‘v2010.10.29 by AngusYoung | mrxcool.com’,  
  53.         Target : Object,  
  54.         TgList : Object,  
  55.         Listeners : null,  
  56.         SelIndex : 0,  
  57.         Data : [],  
  58.         ReData : [],  
  59.         Create : function(oObj) {  
  60.             var _this = this;  
  61.             var oUL = document.createElement(‘ul’);  
  62.             oUL.style.display = ‘none’;  
  63.             oObj.parentNode.insertBefore(oUL, oObj);  
  64.             _this.TgList = oUL;  
  65.             oObjoObj.onkeydown = oObj.onclick = function(e) {  
  66.                 _this.Listen(this, e);  
  67.             };  
  68.             oObj.onblur = function() {  
  69.                 setTimeout(function() {  
  70.                     _this.Clear();  
  71.                 }, 100);  
  72.             };  
  73.         },  
  74.         Complete : function() {  
  75.         },  
  76.         Select : function() {  
  77.             var _this = this;  
  78.             if (_this.ReData.length > 0) {  
  79.                 _this_this.Target.value = _this.ReData[_this.SelIndex].replace(  
  80.                         /*/g, ‘*’).replace(/|/g, ‘|’);  
  81.                 _this.Clear();  
  82.             }  
  83.             setTimeout(function() {  
  84.                 _this.Target.focus();  
  85.             }, 10);  
  86.             _this.Complete();  
  87.         },  
  88.         Listen : function(oObj) {  
  89.             var _this = this;  
  90.             _this.Target = oObj;  
  91.             var e = arguments[arguments.length – 1];  
  92.             var ev = window.event || e;  
  93.             switch (ev.keyCode) {  
  94.             case 9://TAB  
  95.                 return;  
  96.             case 13://ENTER  
  97.                 _this.Target.blur();  
  98.                 _this.Select();  
  99.                 return;  
  100.             case 38://UP  
  101.                 _this_this.SelIndex = _this.SelIndex > 0 ? _this.SelIndex – 1  
  102.                         : _this.ReData.length – 1;  
  103.                 break;  
  104.             case 40://DOWN  
  105.                 _this_this.SelIndex = _this.SelIndex < _this.ReData.length – 1 ? _this.SelIndex + 1  
  106.                         : 0;  
  107.                 break;  
  108.             default:  
  109.                 _this.SelIndex = 0;  
  110.             }  
  111.             if (_this.Listeners) {  
  112.                 clearInterval(_this.Listeners);  
  113.             }  
  114.             _this.Listeners = setInterval(function() {  
  115.                 _this.Get();  
  116.             }, 10);  
  117.         },  
  118.         Get : function() {  
  119.             var _this = this;  
  120.             if (_this.Target.value == ”) {  
  121.                 _this.Clear();  
  122.                 return;  
  123.             }  
  124.             if (_this.Listeners) {  
  125.                 clearInterval(_this.Listeners);  
  126.             }  
  127.             ;  
  128.             _this.ReData = [];  
  129.             var cResult = ”;  
  130.             for ( var i = 0; i < _this.Data.length; i++) {  
  131.                 if (_this.Data[i].toLowerCase().indexOf(  
  132.                         _this.Target.value.toLowerCase()) >= 0) {  
  133.                     _this.ReData.push(_this.Data[i]);  
  134.                     if (_this.ReData.length == _this.Max) {  
  135.                         break;  
  136.                     }  
  137.                 }  
  138.             }  
  139.             var cRegPattern = _this.Target.value.replace(/*/g, ‘*’);  
  140.             cRegPatterncRegPattern = cRegPattern.replace(/|/g, ‘|’);  
  141.             cRegPatterncRegPattern = cRegPattern.replace(/+/g, ‘\+’);  
  142.             cRegPatterncRegPattern = cRegPattern.replace(/./g, ‘\.’);  
  143.             cRegPatterncRegPattern = cRegPattern.replace(/?/g, ‘\?’);  
  144.             cRegPatterncRegPattern = cRegPattern.replace(/^/g, ‘\^’);  
  145.             cRegPatterncRegPattern = cRegPattern.replace(/$/g, ‘\$’);  
  146.             cRegPatterncRegPattern = cRegPattern.replace(/(/g, ‘\(‘);  
  147.             cRegPatterncRegPattern = cRegPattern.replace(/)/g, ‘\)’);  
  148.             cRegPatterncRegPattern = cRegPattern.replace(/[/g, ‘\[‘);  
  149.             cRegPatterncRegPattern = cRegPattern.replace(/]/g, ‘\]’);  
  150.             cRegPatterncRegPattern = cRegPattern.replace(/\/g, ‘\\’);  
  151.             var cRegEx = new RegExp(cRegPattern, ‘i’);  
  152.             for ( var i = 0; i < _this.ReData.length; i++) {  
  153.                 if (_this.Target.value.indexOf(‘*’) >= 0) {  
  154.                     _this.ReData[i] = _this.ReData[i].replace(/*/g, ‘*’);  
  155.                 }  
  156.                 if (_this.Target.value.indexOf(‘|’) >= 0) {  
  157.                     _this.ReData[i] = _this.ReData[i].replace(/|/g, ‘|’);  
  158.                 }  
  159.                 cResult += ‘<li style=“padding:0 5px;line-height:20px;cursor:default;” onmouseover=”‘ 
  160.                         + _this.oo  
  161.                         + ‘.ChangeOn(this);’ 
  162.                         + _this.oo  
  163.                         + ‘.SelIndex=’ 
  164.                         + i  
  165.                         + ‘;” onmousedown=”‘ 
  166.                         + _this.oo  
  167.                         + ‘.Select();”>‘ 
  168.                         + _this.ReData[i]  
  169.                                 .replace(  
  170.                                         cRegEx,  
  171.                                         function(s) {  
  172.                                             return ‘<span style=“background:#ff9;font-weight:bold;font-style:normal;color:#e60;”>‘ 
  173.                                                     + s + ‘</span>‘;  
  174.                                         });  
  175.                 +’</li>‘;  
  176.             }  
  177.             if (cResult == ”) {  
  178.                 _this.Clear();  
  179.             } else {  
  180.                 _this.TgList.innerHTML = cResult;  
  181.                 _this.TgList.style.cssText = ‘display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;’;  
  182.                 _this.TgList.style.top = mSift_SeekTp(_this.Target, 2) + ‘px’;  
  183.                 _this.TgList.style.left = mSift_SeekTp(_this.Target, 3) + ‘px’;  
  184.                 _this_this.TgList.style.width = _this.Target.offsetWidth – 12 + ‘px’;  
  185.             }  
  186.             var oLi = _this.TgList.getElementsByTagName(‘li’);  
  187.             if (oLi.length > 0) {  
  188.                 oLi[_this.SelIndex].style.cssText = ‘background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;’;  
  189.             }  
  190.         },  
  191.         ChangeOn : function(oObj) {  
  192.             var oLi = this.TgList.getElementsByTagName(‘li’);  
  193.             for ( var i = 0; i < oLi.length; i++) {  
  194.                 oLi[i].style.cssText = ‘padding:0 5px;line-height:20px;cursor:default;’;  
  195.             }  
  196.             oObj.style.cssText = ‘background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;’;  
  197.         },  
  198.         Clear : function() {  
  199.             var _this = this;  
  200.             if (_this.TgList) {  
  201.                 _this.TgList.style.display = ‘none’;  
  202.                 _this.ReData = [];  
  203.                 _this.SelIndex = 0;  
  204.             }  
  205.         }  
  206.     }  
  207. </script>  
  208. </head>  
  209. <body>  
  210.     <form name=“salefrm” method=“post” action=“result.jsp”>  
  211.         <input type=“text” onfocus=“loadXMLDoc(this.value)” name=“name” id=“abc” size=“40” />  
  212.         <input type=“submit” value=“搜索” />  
  213.     </form>  
  214.     <script type=“text/javascript”>  
  215.    
  216.     //建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量  
  217.     var oo = new mSift(‘oo’, 20);  
  218.     //获取数据  
  219.     function loadXMLDoc(str) {  
  220.         var xmlhttp;  
  221.         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
  222.             xmlhttp = new XMLHttpRequest();  
  223.         } else {// code for IE6, IE5  
  224.             xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);  
  225.         }  
  226.         xmlhttp.onreadystatechange = function() {  
  227.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
  228.                 oo.Data = xmlhttp.responseText.split(“|”);  
  229.             }  
  230.         };  
  231.         xmlhttp.open(“GET”, “AjaxServlet?name=”+str, true);  
  232.         xmlhttp.send();  
  233.     }  
  234.    
  235.         //指定文本框对象建立特效  
  236.         oo.Create(document.getElementById(‘abc’));  
  237.     </script>  
  238. </body>  
  239. </html> 
  240. AjaxServlet.java 
  241. 代码如下： 
  242.  
  243. public void doGet(HttpServletRequest request, HttpServletResponse response)  
  244.         throws ServletException, IOException {  
  245.     response.setContentType(“text/xml; charset=utf-8″);  
  246.     PrintWriter out = response.getWriter();  
  247.     String str = newsDao.findAllNewsType();  
  248.     out.println(str);  
  249. } 

以上就是主要代码，数据库查询后返回的是以”|”分割连接的字符串组合

转载请注明：代码学堂>编程开发 > jsp教程 > JSP+ajax实现百度首页自动补全功能实例代码

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！10210454@qq.com
2. 本站不保证所提供所有下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有RB奖励和额外RMB收入！

磊宇堂正在使用的服务器 维护管理由磊宇云服务器提供支持

磊宇堂 » JSP+ajax实现百度首页自动补全功能实例代码

磊宇堂 SVIP

分享到：

相关推荐

提供最优质的资源集合

立即查看 了解详情