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

最新推荐文章于 2022-08-21 16:41:54 发布
最新推荐文章于 2022-08-21 16:41:54 发布
阅读量656 收藏
点赞数
分类专栏： jsp技术 文章标签： ajax 乱码 数据 jstl java

下面是我用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;" οnmοuseοver="'

                        + _this.oo 

                        + '.ChangeOn(this);'

                        + _this.oo 

                        + '.SelIndex='

                        + i 

                        + ';" οnmοusedοwn="'

                        + _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" οnfοcus="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:图省劲嘛）。

.................... 【.........阅读全文】

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号：javalearns   随时随地学Java

或扫一扫

随时随地学Java


wurui8
关注
专栏目录
autocomplete自动补全的例子jsp
11-07
autocomplete自动补全的例子jsp,应用在现在开发的项目中
servlet+jsp实现百度搜索自动补全功能
08-24
servlet+jsp实现百度搜索自动补全功能.http://blog.csdn.net/lai13835601355/article/details/52302410这是ssh版本的。
Ajax——Ajax实现自动补全
weixin_44606952的博客
08-21 1088
本篇文章主要总结的是：利用Ajax实现搜索框的自动补全功能，即：用户输入数据之后，服务器前往数据库中查询用户输入的类似的数据，并且展示在搜索框下方，当用户点击查询列表时可以将对应的内容设置到搜索框中。
java input 自动补全_JSP + ajax实现输入框自动补全功能 实例代码
weixin_42640676的博客
02-27 306
string path = request.getcontextpath();string basepath = request.getscheme() + "://"+ request.getservername() + ":" + request.getserverport()+ path + "/";%>查找function msift_seektp(oobj, ndire) {var...
百度搜索框自动补全
fangyuwuzhu的博客
03-28 2234
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .co
JSP+AJAX实现实时输入框自动补全功能示例
总结来说，这篇文章提供了一个基础的 JSP 和 AJAX 实现输入框自动补全功能的实例，适合初学者理解AJAX的核心原理和基本应用。在实际项目中，开发者还需要考虑性能优化、错误处理和用户体验等因素，以确保功能的稳定...
jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路
10-27
而通过利用AJAX技术，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，实现了局部刷新的功能。JSP是一种动态网页技术，结合AJAX，可以有效地提高Web应用的交互性与用户体验。 在本示例中，...
AJAX基本应用之:根据输入内容自动填充下拉框。(ASP.NET版)[转]
weixin_30315435的博客
08-17 171
要在ASP.NET中实现AJAX,请先下载ajax.dll并引用，并且最好对AJAX的基本原理有所了解。有一本电子本叫《ajax基础教程》，网上有下的，讲得很清楚。里面代码是JAVA版，不过没有关系。 这是AJAX的典型应用之一，即根据用户在输入框内输入的内容来搜索数据库，然后把内容显示出来，当然不一定非要显示在下拉框中，也可以放在其它的地方，实际上这就是JavaScript...
JavaScript 文本框下拉自动补全提示
04-15
JavaScript 文本框下拉提示，可以自己添加数据
具有Ajax自动建议功能的TextBox控件(附源码)
12-16 117
近期准备翻译一系列Ajax、Javascript方面相关的Web开发文章，以强化专业学习和提升英语读写能力，欢迎大家拍砖挑错，不甚感激！ 原文链接：http://codeproject.com/KB/ajax/AJAXAutoSuggest.aspx 版权归Cassio Alves所有 源码下载 引言 这是我前段时间制作的具有Ajax 自动建议功能的...
jquery的输入框自动补全功能+ajax
weixin_34026484的博客
09-16 150
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数：1461 标签： web前端 更多 个人分类： web前端 内容参考网友文章写成，原博的链接找不到了，但是感谢分享！ 效果图： 涉及到ajax请求我这里本地请求不到数据就先放测试代码，在文章的最后会放上ajax代码： ...
Ajax 自动投注,ajax 服务器文本框自动填值
weixin_42433529的博客
08-05 365
这样的话就增加了服务器的负担。后面自己他细想了一下。想利用ajax去实现这样一个效果。代码如下：前台代码：通过用户名自动填充用户其他信息//获取用户名文本框的值function WritedataText(){var username=$("#Txtusename").val();if(username.length==0){alert("输入的用户名不能为空");return ;}//执行通过用...
javascript实现自动补全
weixin_30588907的博客
07-21 219
网上下载的什么autocomplete 都是 先加载所有的数据在自动补全 数据量大了浏览器加载就会很慢 写个点击自动加载的 而且很简单可以直接套用autoImport 方法 不需要格外的样式 不过要引用jquery的js //服务器端输出数据 格式定义[{Id:"1",Name:"jiaozi"},{Id:"2",Name:"min"}] //参数1 为当前...
html.textboxfor ajax,ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中_ajax教程...
weixin_42320061的博客
06-16 170
功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择1.建立一aspx页面，html代码WebForm1//城市——————————function cityResult(){var city=document.getElementById(“TextBox1”);WebForm1.GetCityList(city.value,get_city_Result_CallBa...
javaweb(ajax+json实现自动补全&&ajax实现分页)
m0_68332494的博客
04-29 1695
1使用jQuery的ajax判断用户名是否存在 （$.ajax/$.post） 无刷新：不刷新整个页面，只刷新局部 无刷新的好处:只更新部分页面，有效利用带宽，提高用户体验 $.ajax()常用参数与说明 一、$.ajax() url:请求地址 data:请求参数 "name="+sname+"&pwd="+spwd {name:sname,pwd:spwd} type:post/get 请求方式 dataType:预计服务器可能返回的数据类型 text/json success:..
JQuery实现文本框自动补全(修改版)
long546324的专栏
05-18 201
[color=blue]采用JQuery和.net中的一般处理程序实现文本框的自动补全，鼠标、键盘功能齐全[/color] [code="html"] 自动补全 自动补全： [/code] [color=blue]test.js文件[...
js ajax实现搜索,JS+Ajax实现百度智能搜索框
weixin_30421043的博客
08-05 496
JS+Ajax实现百度智能搜索框2019-01-01编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了JS+Ajax实现百度智能搜索框，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。前端search.jspIn...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值