JS实现TEXTBOX输入内容出现下拉列表显示所有包含输入内容并实现键盘上下选择回车或点击跳转
大家不要看这个代码和小猪站长的代码很像，但是我是修改过的哟。在小猪站长的代码基础上，将<ul><li>改成了<div><a>。用<div>更好设计样式，用<a>可以添加链接地址。我用这个代码实现的是搜索系统的功能，输入系统包含的任意字符，下来列表列出包含该字符的所有系统，通过上下键或用鼠标选择想要的系统，点击或者按回车直接跳转到相应的系统。
具体代码如下：
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: '',
Target: Object,
TgList: Object,
Listeners: null,
SelIndex: 0,
Data: [],
ReData: [],
Href: [],
ReHref: [],
Create: function (oObj) {
var _this = this;
var oUL = document.createElement('div');
oUL.className = "fudong";//这是你自己的DIV的样式
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, '|');
}
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 || ev.which || ev.charCode) {
case 9: //TAB
return;
case 13: //ENTER
_this.Target.blur();
_this.Select();
if (_this.SelIndex < _this.ReData.length) {
var index = _this.SelIndex;
var href = _this.ReHref[index];
window.open(href, "newwindow");
}
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 = [];
_this.ReHref = [];
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]);
_this.ReHref.push(_this.Href[i]);
if (_this.ReData.length == _this.Max) { break; }
if (_this.ReHref.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 += '<a href="' + _this.ReHref[i] + '" onmouseover="' + _this.oo + '.ChangeOn(this);' + _this.oo + '.SelIndex=' + i + ';" target="_blank">' + _this.ReData[i].replace(cRegEx, function (s) { return '' + s + ''; }) + '</a>';
}
if (cResult == '') { _this.Clear(); }
else {
_this.TgList.innerHTML = cResult;
_this.TgList.style.cssText = '';
//_this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px';
//_this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px';
}
var oLi = _this.TgList.getElementsByTagName('a');
if (oLi.length > 0) {
oLi[_this.SelIndex].style.cssText = 'background:#f2f2f2;color:red;';
}
},
ChangeOn: function (oObj) {
var oLi = this.TgList.getElementsByTagName('a');
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.cssText = '';
} oObj.style.cssText = ''; },
Clear: function () {
var _this = this;
if (_this.TgList) {
_this.TgList.style.display = 'none';
_this.ReData = [];
_this.SelIndex = 0;
}
}
}
页面中的代码：
<input name="" type="text" id="inp1" x-webkit-speech onspeechchange="speak();" onwebkitspeechchange="speak();"/>
<script type ="text/javascript" >
//建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量
var oo = new mSift('oo', 20);
//数据
oo.Data = ['百度','博客园', '新浪', 'hao123', '淘宝网'];
oo.Href = ['http://baidu.com','http://www.cnblogs.com','http://www.sina.com','http://www.hao123.com','http://www.taobao.com'];
//指定文本框对象建立特效
oo.Create(document.getElementById('inp1'));
</script>