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

string path = request.getcontextpath();

string basepath = request.getscheme() + "://"

+ request.getservername() + ":" + request.getserverport()

+ path + "/";

%>

查找

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 += '

'

+ _this.redata[i]

.replace(

cregex,

function(s) {

return ''

+ s + '';

});

+'

';

}

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;

}

}

}

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

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