侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

JSP + ajax实现输入框自动补全功能 实例代码

前端  /  管理员 发布于 5年前   494

下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果:

index.jsp(包含主要的js代码)

复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 

<% 

    String path = request.getContextPath(); 

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort() 

            + path + "/"; 

%> 

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>查找</title> 

<script type="text/javascript"> 

    function mSift_SeekTp(oObj, nDire) { 

        var nPosition = null; 

        if (oObj.getBoundingClientRect && !document.all) { 

            var oDc = document.documentElement; 

            switch (nDire) { 

            case 0: 

                return oObj.getBoundingClientRect().top + oDc.scrollTop; 

            case 1: 

                return oObj.getBoundingClientRect().right + oDc.scrollLeft; 

            case 2: 

                return oObj.getBoundingClientRect().bottom + oDc.scrollTop; 

            case 3: 

                return oObj.getBoundingClientRect().left + oDc.scrollLeft; 

            } 

        } else { 

            if (nDire == 1 || nDire == 3) { 

                nPosition = oObj.offsetLeft; 

            } else { 

                nPosition = oObj.offsetTop; 

            } 

            if (arguments[arguments.length - 1] != 0) { 

                if (nDire == 1) { 

                    nPosition += oObj.offsetWidth; 

                } else if (nDire == 2) { 

                    nPosition += oObj.offsetHeight; 

                } 

            } 

            if (oObj.offsetParent != null) { 

                nPosition += mSift_SeekTp(oObj.offsetParent, nDire, 0); 

            } 

            return nPosition; 

        } 

    } 

    function mSift(cVarName, nMax) { 

        this.oo = cVarName; 

        this.Max = nMax; 

    } 

    mSift.prototype = { 

        Varsion : 'v2010.10.29 by AngusYoung | mrxcool.com', 

        Target : Object, 

        TgList : Object, 

        Listeners : null, 

        SelIndex : 0, 

        Data : [], 

        ReData : [], 

        Create : function(oObj) { 

            var _this = this; 

            var oUL = document.createElement('ul'); 

            oUL.style.display = 'none'; 

            oObj.parentNode.insertBefore(oUL, oObj); 

            _this.TgList = oUL; 

            oObj.onkeydown = oObj.onclick = function(e) { 

                _this.Listen(this, e); 

            }; 

            oObj.onblur = function() { 

                setTimeout(function() { 

                    _this.Clear(); 

                }, 100); 

            }; 

        }, 

        Complete : function() { 

        }, 

        Select : function() { 

            var _this = this; 

            if (_this.ReData.length > 0) { 

                _this.Target.value = _this.ReData[_this.SelIndex].replace( 

                        /\*/g, '*').replace(/\|/g, '|'); 

                _this.Clear(); 

            } 

            setTimeout(function() { 

                _this.Target.focus(); 

            }, 10); 

            _this.Complete(); 

        }, 

        Listen : function(oObj) { 

            var _this = this; 

            _this.Target = oObj; 

            var e = arguments[arguments.length - 1]; 

            var ev = window.event || e; 

            switch (ev.keyCode) { 

            case 9://TAB 

                return; 

            case 13://ENTER 

                _this.Target.blur(); 

                _this.Select(); 

                return; 

            case 38://UP 

                _this.SelIndex = _this.SelIndex > 0 ? _this.SelIndex - 1 

                        : _this.ReData.length - 1; 

                break; 

            case 40://DOWN 

                _this.SelIndex = _this.SelIndex < _this.ReData.length - 1 ? _this.SelIndex + 1 

                        : 0; 

                break; 

            default: 

                _this.SelIndex = 0; 

            } 

            if (_this.Listeners) { 

                clearInterval(_this.Listeners); 

            } 

            _this.Listeners = setInterval(function() { 

                _this.Get(); 

            }, 10); 

        }, 

        Get : function() { 

            var _this = this; 

            if (_this.Target.value == '') { 

                _this.Clear(); 

                return; 

            } 

            if (_this.Listeners) { 

                clearInterval(_this.Listeners); 

            } 

            ; 

            _this.ReData = []; 

            var cResult = ''; 

            for ( var i = 0; i < _this.Data.length; i++) { 

                if (_this.Data[i].toLowerCase().indexOf( 

                        _this.Target.value.toLowerCase()) >= 0) { 

                    _this.ReData.push(_this.Data[i]); 

                    if (_this.ReData.length == _this.Max) { 

                        break; 

                    } 

                } 

            } 

            var cRegPattern = _this.Target.value.replace(/\*/g, '*'); 

            cRegPattern = cRegPattern.replace(/\|/g, '|'); 

            cRegPattern = cRegPattern.replace(/\+/g, '\\+'); 

            cRegPattern = cRegPattern.replace(/\./g, '\\.'); 

            cRegPattern = cRegPattern.replace(/\?/g, '\\?'); 

            cRegPattern = cRegPattern.replace(/\^/g, '\\^'); 

            cRegPattern = cRegPattern.replace(/\$/g, '\\$'); 

            cRegPattern = cRegPattern.replace(/\(/g, '\\('); 

            cRegPattern = cRegPattern.replace(/\)/g, '\\)'); 

            cRegPattern = cRegPattern.replace(/\[/g, '\\['); 

            cRegPattern = cRegPattern.replace(/\]/g, '\\]'); 

            cRegPattern = cRegPattern.replace(/\\/g, '\\\\'); 

            var cRegEx = new RegExp(cRegPattern, 'i'); 

            for ( var i = 0; i < _this.ReData.length; i++) { 

                if (_this.Target.value.indexOf('*') >= 0) { 

                    _this.ReData[i] = _this.ReData[i].replace(/\*/g, '*'); 

                } 

                if (_this.Target.value.indexOf('|') >= 0) { 

                    _this.ReData[i] = _this.ReData[i].replace(/\|/g, '|'); 

                } 

                cResult += '<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'

                        + _this.oo 

                        + '.ChangeOn(this);'

                        + _this.oo 

                        + '.SelIndex='

                        + i 

                        + ';" onmousedown="'

                        + _this.oo 

                        + '.Select();">'

                        + _this.ReData[i] 

                                .replace( 

                                        cRegEx, 

                                        function(s) { 

                                            return '<span style="background:#ff9;font-weight:bold;font-style:normal;color:#e60;">'

                                                    + s + '</span>'; 

                                        }); 

                +'</li>'; 

            } 

            if (cResult == '') { 

                _this.Clear(); 

            } else { 

                _this.TgList.innerHTML = cResult; 

                _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;'; 

                _this.TgList.style.top = mSift_SeekTp(_this.Target, 2) + 'px'; 

                _this.TgList.style.left = mSift_SeekTp(_this.Target, 3) + 'px'; 

                _this.TgList.style.width = _this.Target.offsetWidth - 12 + 'px'; 

            } 

            var oLi = _this.TgList.getElementsByTagName('li'); 

            if (oLi.length > 0) { 

                oLi[_this.SelIndex].style.cssText = 'background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; 

            } 

        }, 

        ChangeOn : function(oObj) { 

            var oLi = this.TgList.getElementsByTagName('li'); 

            for ( var i = 0; i < oLi.length; i++) { 

                oLi[i].style.cssText = 'padding:0 5px;line-height:20px;cursor:default;'; 

            } 

            oObj.style.cssText = 'background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; 

        }, 

        Clear : function() { 

            var _this = this; 

            if (_this.TgList) { 

                _this.TgList.style.display = 'none'; 

                _this.ReData = []; 

                _this.SelIndex = 0; 

            } 

        } 

    } 

</script> 

</head> 

<body> 

    <form name="salefrm" method="post" action="result.jsp"> 

        <input type="text" onfocus="loadXMLDoc(this.value)" name="name" id="abc" size="40" /> 

        <input type="submit" value="搜索" /> 

    </form> 

    <script type="text/javascript"> 

  

    //建立实例,第一个参数是实例对象的名称,第二个是最多显示的数量 

    var oo = new mSift('oo', 20); 

    //获取数据 

    function loadXMLDoc(str) { 

        var xmlhttp; 

        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 

            xmlhttp = new XMLHttpRequest(); 

        } else {// code for IE6, IE5 

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

        } 

        xmlhttp.onreadystatechange = function() { 

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

                oo.Data = xmlhttp.responseText.split("|"); 

            } 

        }; 

        xmlhttp.open("GET", "AjaxServlet?name="+str, true); 

        xmlhttp.send(); 

    } 

  

        //指定文本框对象建立特效 

        oo.Create(document.getElementById('abc')); 

    </script> 

</body> 

</html>

AjaxServlet.java

复制代码 代码如下:

public void doGet(HttpServletRequest request, HttpServletResponse response) 

        throws ServletException, IOException { 

    response.setContentType("text/xml; charset=utf-8"); 

    PrintWriter out = response.getWriter(); 

    String str = newsDao.findAllNewsType(); 

    out.println(str); 

}

以上就是主要代码,数据库查询后返回的是以"|"分割连接的字符串组合(PS:图省劲嘛)。


  • 上一条:
    jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路
    下一条:
    jsp中利用jquery+ajax在前后台之间传递json格式参数
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客