基于javascript实现仿百度输入框自动匹配功能


Posted in Javascript onJanuary 03, 2016

本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下

<HTML> 
<HEAD> 
<title>带输入匹配的文本框</title> 
<style> 
body,div { 
font-family:verdana; 
line-height:100%; 
font-size:10pt; 
} 
input { 
width:320px; 
} 
h1 { 
text-align:center; 
font-size:2.2em; 
} 
#divc { 
border:1px solid #555; 
} 
.des { 
width:500px; 
background-color:lightyellow; 
border:1px solid #555; 
padding:25px; 
margin-top:25px; 
} 
.mouseover { 
color:#ffffff; 
background-color:highlight; 
width:100%; 
cursor:default; 
} 
.mouseout { 
color:#000; 
width:100%; 
background-color:#ffffff; 
cursor:default; 
} 
</style> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function jsAuto(instanceName,objID) 
{ 
this._msg = []; 
this._x = null; 
this._o = document.getElementById( objID ); 
if (!this._o) return; 
this._f = null; 
this._i = instanceName; 
this._r = null; 
this._c = 0; 
this._s = false; 
this._v = null; 
this._o.style.visibility = "hidden"; 
this._o.style.position = "absolute"; 
this._o.style.zIndex = "9999"; 
this._o.style.overflow = "auto"; 
this._o.style.height = "50"; 
return this; 
};

jsAuto.prototype.directionKey=function() { with (this)
{
var e = _e.keyCode ? _e.keyCode : _e.which;
var l = _o.childNodes.length;
(_c>l-1 || _c<0) ? _s=false : "";

if( e==40 && _s )
{
_o.childNodes[_c].className="mouseout";
(_c >= l-1) ? _c=0 : _c ++;
_o.childNodes[_c].className="mouseover";
}
if( e==38 && _s )
{
_o.childNodes[_c].className="mouseout";
_c--<=0 ? _c = _o.childNodes.length-1 : "";
_o.childNodes[_c].className="mouseover";
}
if( e==13 )
{
if(_o.childNodes[_c] && _o.style.visibility=="visible")
{
_r.value = _x[_c];
_o.style.visibility = "hidden";
}
}
if( !_s )
{
_c = 0;
_o.childNodes[_c].className="mouseover";
_s = true;
}
}};

// mouseEvent.
jsAuto.prototype.domouseover=function(obj) { with (this)
{
_o.childNodes[_c].className = "mouseout";
_c = 0;
obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
}};
jsAuto.prototype.domouseout=function(obj)
{
obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
};
jsAuto.prototype.doclick=function(msg) { with (this)
{
if(_r)
{
_r.value = msg;
_o.style.visibility = "hidden";
}
else
{
alert("javascript autocomplete ERROR :\n\n can not get return object.");
return;
}
}};

// object method;
jsAuto.prototype.item=function(msg)
{
if( msg.indexOf(",")>0 )
{
var arrMsg=msg.split(",");
for(var i=0; i<arrMsg.length; i++)
{
arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
}
}
else
{
this._msg.push(msg);
}
this._msg.sort();
};
jsAuto.prototype.append=function(msg) { with (this)
{
_i ? "" : _i = eval(_i);
_x.push(msg);
var div = document.createElement("DIV");
//bind event to object.
div.onmouseover = function(){_i.domouseover(this)};
div.onmouseout = function(){_i.domouseout(this)};
div.onclick = function(){_i.doclick(msg)};
var re = new RegExp("(" + _v + ")","i");
div.style.lineHeight="140%";
div.className = "mouseout";
if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
div.style.fontFamily = "verdana";

_o.appendChild(div);
}};
jsAuto.prototype.display=function() { with(this)
{
if(_f && _v!="")
{
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visible";
}
else
{
_o.style.visibility="hidden";
}
}};
jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)
{
var re;
_e = event;
var e = _e.keyCode ? _e.keyCode : _e.which;
_x = [];
_f = false;
_r = document.getElementById( fID );
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");
_o.innerHTML="";

for(var i=0; i<_msg.length; i++)
{
if(re.test(_msg[i]))
{
_i.append(_msg[i]);
_f = true;
}
}

_i ? _i.display() : alert("can not get instance");

if(_f)
{
if((e==38 || e==40 || e==13))
{
_i.directionKey();
}
else
{
_c=0;
_o.childNodes[_c].className = "mouseover";
_s=true;
}
}
}};
window.onerror=new Function("return true;");
//-->
</SCRIPT>
</HEAD>

<BODY>
<div id="divc">
<!--this is the autocomplete container.-->
</div>
<div align="center">
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">
</div>

<SCRIPT LANGUAGE="JavaScript">
<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,s-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,a-start,b-start,c-start,d-start,e-start,z-start,z-start");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
</SCRIPT>
<center>请在输入框输入一个字母:</center>
</BODY>
</HTML>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
基于vue2实现左滑删除功能
Nov 28 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
You might like
php 将excel导入mysql
2009/11/09 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
使用php实现截取指定长度
2013/08/06 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
8个PHP数组面试题
2015/06/23 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
js微信分享API
2020/10/11 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python openpyxl使用方法详解
2019/07/18 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
联想C++笔试题
2012/06/13 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
六年级数学教学反思
2014/02/03 职场文书
学校宣传标语
2014/06/18 职场文书
运动员获奖感言
2014/08/15 职场文书
自主招生专家推荐信
2015/03/26 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
利用js实现简单开关灯代码
2021/11/23 Javascript