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[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="font-weight:bold;font-style:normal;">'
+ s + '</span>';
});
+'</li>';
}
if (cResult == '') {
_this.Clear();
} else {
_this.TgList.innerHTML = cResult;
_this.TgList.style.cssText = 'display:block;position:absolute;background:#fff;border:rgb(51, 204, 255) 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 + '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 type="text/javascript">
var oo=new mSift('oo',20); //提示框最多显示20条数据
oo.Data=${brandNames}; //${brandNames}为从Action中或controller中传过来的JSONArray对象,要弹出的提示内容的集合也可以自己定义
oo.Create(document.getElementById('inputTextId')); //inputTextId 为所要实现自动提示的文本框的id
</script>
说明源链接已无从查到,这可以根据代码判断作者信息Varsion : 'v2010.10.29 by AngusYoung',使用时请勿删除。
分享到:
相关推荐
jQuery搜索框自动提示代码基于jquery.1.8.2.js制作,利用JsonpAjax.js制作搜索框输入文字提示下拉框代码,ajax数据调用的是百度文字库。
jquery+php实现用户输入搜索内容时自动提示
jquery实现input搜索输入关键词后自动筛选相关信息效果
我们经常会在网页中遇到这样一种搜索体验,当你在搜索框中输入关键字时,搜索框会帮助你自动补全你想要的搜索关键字,并提供多种组合供你选择。这次要介绍的这款jQuery插件就是实现搜索框自动补全关键字这个功能,...
文本框输入 @ 符号的输入提示的JS代码,类似搜索框的提示,输入指定的字符会弹出提示。和自动完成功能有些区别。
利用javascript实现类似于百度,谷歌搜索的自动模糊搜索补全提示的功能,代码中已有详细的注释信息,可以实现鼠标点击,上下方向键浏览点击,enter确认等常用功能,可移植性不错。(修订版)
这是一款jQuery实现的网站搜索框经常用到的文本框input输入关键词后自动补全筛选相关信息的js代码。
<!... <... <head> ...meta charset="utf-8" />...仿百度搜索框的联想词提示效果js代码<... 这是一款纯javaScript实现的仿百度搜索框联想词提示代码,搜索框输入文字自动提示相关联想词js特效。
jsp做的ajax仿百度搜索自动提示功能,导入项目可直接运行。
jQuery搜索框输入文字下拉提示菜单(bootstrap风格)autocomplete
主要介绍了JS实现仿google、百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下
1,纯js实现输入提示自动检索功能 2,跨浏览器支持,在ie,firebox,chrome,360,傲游 等测试ok 3,不会影响页面原有布局 4,代码干净,简单易懂,方便扩展
今天突然想给本站做个搜索页面,这样用户可以通过搜索...jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验
百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么...
java script 搜索服务 输入提示并自动搜索 标记 信息框
本效果是使用jquery.fastLiveFilter.js插件来实现的,类似于搜索框的输入提示功能,实现对匹配项目的自动过滤功能,当你输入的时候,会根据输入的字符智能匹配符合的内容,自动列出来,提高人性化操作体验,如果您对...
利用javascript实现类似于百度,谷歌搜索的自动模糊搜索补全提示的功能,代码中已有详细的注释信息,可以实现鼠标点击,上下方向键浏览点击,enter确认等常用功能,可移植性不错。
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验