JS实现仿百度输入框自动匹配功能的示例代码


Posted in Javascript onFebruary 19, 2014

现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到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中数组的concat()方法使用介绍
Dec 18 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
node.js通过url读取文件
Oct 16 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 #Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 #Javascript
JS执行删除前的判断代码
Feb 18 #Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 #Javascript
jquery的live使用注意事项
Feb 18 #Javascript
js如何获取object类型里的键值
Feb 18 #Javascript
纯js写的分页表格数据为json串
Feb 18 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP面向对象法则
2012/02/23 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js实现商城星星评分的效果
2015/12/29 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
大专生简历的自我评价
2013/11/26 职场文书
企业理念标语
2014/06/09 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
婚宴主持词
2015/06/30 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python