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

下面是我用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:图省劲嘛)。

(0)

相关推荐

  • ajax来自动补全表单字段示例

    源代码: 脚本一: <!DOCTYPE html> <html> <head> <title>Auto-fill Form Fields</title> <link rel="stylesheet"href="script06.css" rel="external nofollow" > <script src="script06.js">&l

  • Ajax实现搜索引擎自动补全功能

    每当我们遇到一些问题时候,我们会百度一下,你是有过我们的问题还没打完就已经出现的经历? 如下图: 天猫: 京东: 这时候的你是否想到如何实现这个功能? 我们的网页明明没有刷新,可是却出现了数据的交互,也就是Ajax的强大之处. 下面以一个例子来实现. 搜索框和搜索按钮,我们希望在搜索框输入部分书名时,能够实现书名的自动补全功能.每当点击了相应的书名,就把内容输入到搜索框. 对应的代码 Search <input type="text" name="name"

  • asp.net+ajax+sqlserver自动补全功能实现解析

    代码下载 说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表实现自动补全功能.就下来就是将数据库表转为js数组,自然而然就想到了ajax. ² Asp.NetAjax的两种基本开发模式这篇

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

    下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();

  • BootStrap Typeahead自动补全插件实例代码

    关键代码如下所示: $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, preProcess: function (result) { return result; } }, display: "Value", val: "

  • Ajax实现关键字联想和自动补全功能及遇到坑

    目录 遇到的小坑 代码实现 前端代码 后端代码 用到的实体类 自己封装的jdbc工具类 数据库表: 效果展示: 遇到的小坑 回调函数相对window.onload的摆放位置 给回调函数addData传数据时,如何操作才能将数据传进去 代码实现 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax实现关键

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

    根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q

  • jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht

  • Bootstrap3使用typeahead插件实现自动补全功能

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------

  • jQuery实现Email邮箱地址自动补全功能代码

    本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

随机推荐