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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
Js基础学习资料
Nov 23 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 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中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js监听input输入框值的实时变化实例
2017/01/26 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python使用cookie库操保存cookie详解
2014/03/03 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python实现神经网络感知器算法
2017/12/20 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
python的json包位置及用法总结
2020/06/21 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
小学后勤管理制度
2014/01/14 职场文书
团结演讲稿范文
2014/05/23 职场文书
国庆节新闻稿
2015/07/17 职场文书
解除租赁合同协议书
2016/03/21 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js