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

String path &＃61; request.getContextPath();

String basePath &＃61; request.getScheme() &＃43; "://"

&＃43; request.getServerName() &＃43; ":" &＃43; request.getServerPort()

&＃43; path &＃43; "/";

%>

function mSift_SeekTp(oObj, nDire) {

var nPosition &＃61; null;

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

var oDc &＃61; document.documentElement;

switch (nDire) {

case 0:

return oObj.getBoundingClientRect().top &＃43; oDc.scrollTop;

case 1:

return oObj.getBoundingClientRect().right &＃43; oDc.scrollLeft;

case 2:

return oObj.getBoundingClientRect().bottom &＃43; oDc.scrollTop;

case 3:

return oObj.getBoundingClientRect().left &＃43; oDc.scrollLeft;

}

} else {

if (nDire &＃61;&＃61; 1 || nDire &＃61;&＃61; 3) {

nPosition &＃61; oObj.offsetLeft;

} else {

nPosition &＃61; oObj.offsetTop;

}

if (arguments[arguments.length - 1] !&＃61; 0) {

if (nDire &＃61;&＃61; 1) {

nPosition &＃43;&＃61; oObj.offsetWidth;

} else if (nDire &＃61;&＃61; 2) {

nPosition &＃43;&＃61; oObj.offsetHeight;

}

}

if (oObj.offsetParent !&＃61; null) {

nPosition &＃43;&＃61; mSift_SeekTp(oObj.offsetParent, nDire, 0);

}

return nPosition;

}

}

function mSift(cVarName, nMax) {

this.oo &＃61; cVarName;

this.Max &＃61; nMax;

}

mSift.prototype &＃61; {

Varsion : &＃39;v2010.10.29 by AngusYoung | mrxcool.com&＃39;,

Target : Object,

TgList : Object,

Listeners : null,

SelIndex : 0,

Data : [],

ReData : [],

Create : function(oObj) {

var _this &＃61; this;

var oUL &＃61; document.createElement(&＃39;ul&＃39;);

oUL.style.display &＃61; &＃39;none&＃39;;

oObj.parentNode.insertBefore(oUL, oObj);

_this.TgList &＃61; oUL;

oObj.onkeydown &＃61; oObj.onclick &＃61; function(e) {

_this.Listen(this, e);

};

oObj.onblur &＃61; function() {

setTimeout(function() {

_this.Clear();

}, 100);

};

},

Complete : function() {

},

Select : function() {

var _this &＃61; this;

if (_this.ReData.length > 0) {

_this.Target.value &＃61; _this.ReData[_this.SelIndex].replace(

/\*/g, &＃39;*&＃39;).replace(/\|/g, &＃39;|&＃39;);

_this.Clear();

}

setTimeout(function() {

_this.Target.focus();

}, 10);

_this.Complete();

},

Listen : function(oObj) {

var _this &＃61; this;

_this.Target &＃61; oObj;

var e &＃61; arguments[arguments.length - 1];

var ev &＃61; window.event || e;

switch (ev.keyCode) {

case 9://TAB

return;

case 13://ENTER

_this.Target.blur();

_this.Select();

return;

case 38://UP

_this.SelIndex &＃61; _this.SelIndex > 0 ? _this.SelIndex - 1

: _this.ReData.length - 1;

break;

case 40://DOWN

_this.SelIndex &＃61; _this.SelIndex <_this.ReData.length - 1 ? _this.SelIndex &＃43; 1

: 0;

break;

default:

_this.SelIndex &＃61; 0;

}

if (_this.Listeners) {

clearInterval(_this.Listeners);

}

_this.Listeners &＃61; setInterval(function() {

_this.Get();

}, 10);

},

Get : function() {

var _this &＃61; this;

if (_this.Target.value &＃61;&＃61; &＃39;&＃39;) {

_this.Clear();

return;

}

if (_this.Listeners) {

clearInterval(_this.Listeners);

}

;

_this.ReData &＃61; [];

var cResult &＃61; &＃39;&＃39;;

for ( var i &＃61; 0; i <_this.Data.length; i&＃43;&＃43;) {

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

_this.Target.value.toLowerCase()) >&＃61; 0) {

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

if (_this.ReData.length &＃61;&＃61; _this.Max) {

break;

}

}

}

var cRegPattern &＃61; _this.Target.value.replace(/\*/g, &＃39;*&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\|/g, &＃39;|&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\&＃43;/g, &＃39;\\&＃43;&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\./g, &＃39;\\.&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\?/g, &＃39;\\?&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\^/g, &＃39;\\^&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\$/g, &＃39;\\$&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\(/g, &＃39;\\(&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\)/g, &＃39;\\)&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\[/g, &＃39;\\[&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\]/g, &＃39;\\]&＃39;);

cRegPattern &＃61; cRegPattern.replace(/\\/g, &＃39;\\\\&＃39;);

var cRegEx &＃61; new RegExp(cRegPattern, &＃39;i&＃39;);

for ( var i &＃61; 0; i <_this.ReData.length; i&＃43;&＃43;) {

if (_this.Target.value.indexOf(&＃39;*&＃39;) >&＃61; 0) {

_this.ReData[i] &＃61; _this.ReData[i].replace(/\*/g, &＃39;*&＃39;);

}

if (_this.Target.value.indexOf(&＃39;|&＃39;) >&＃61; 0) {

_this.ReData[i] &＃61; _this.ReData[i].replace(/\|/g, &＃39;|&＃39;);

}

cResult &＃43;&＃61; &＃39;

&＃43; _this.ReData[i]

.replace(

cRegEx,

function(s) {

return &＃39;&＃39;

&＃43; s &＃43; &＃39;&＃39;;

});

&＃43;&＃39;

}

if (cResult &＃61;&＃61; &＃39;&＃39;) {

_this.Clear();

} else {

_this.TgList.innerHTML &＃61; cResult;

_this.TgList.style.cssText &＃61; &＃39;display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;&＃39;;

_this.TgList.style.top &＃61; mSift_SeekTp(_this.Target, 2) &＃43; &＃39;px&＃39;;

_this.TgList.style.left &＃61; mSift_SeekTp(_this.Target, 3) &＃43; &＃39;px&＃39;;

_this.TgList.style.width &＃61; _this.Target.offsetWidth - 12 &＃43; &＃39;px&＃39;;

}

var oLi &＃61; _this.TgList.getElementsByTagName(&＃39;li&＃39;);

if (oLi.length > 0) {

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

}

},

ChangeOn : function(oObj) {

var oLi &＃61; this.TgList.getElementsByTagName(&＃39;li&＃39;);

for ( var i &＃61; 0; i

oLi[i].style.cssText &＃61; &＃39;padding:0 5px;line-height:20px;cursor:default;&＃39;;

}

oObj.style.cssText &＃61; &＃39;background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;&＃39;;

},

Clear : function() {

var _this &＃61; this;

if (_this.TgList) {

_this.TgList.style.display &＃61; &＃39;none&＃39;;

_this.ReData &＃61; [];

_this.SelIndex &＃61; 0;

}

}

}

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

var oo &＃61; new mSift(&＃39;oo&＃39;, 20);

//获取数据

function loadXMLDoc(str) {

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7&＃43;, Firefox, Chrome, Opera, Safari

xmlhttp &＃61; new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp &＃61; new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange &＃61; function() {

if (xmlhttp.readyState &＃61;&＃61; 4 && xmlhttp.status &＃61;&＃61; 200) {

oo.Data &＃61; xmlhttp.responseText.split("|");

}

};

xmlhttp.open("GET", "AjaxServlet?name&＃61;"&＃43;str, true);

xmlhttp.send();

}

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

oo.Create(document.getElementById(&＃39;abc&＃39;));