搜索框根据输入自动提示--js实现


js文件内容：

function mSift_SeekTp(oObj, nDire) {

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) {

var nPosition = oObj.offsetLeft;

} else {

var 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',

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() {

handleData();

},

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