基于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 prototype,executing,context,closure
Dec 24 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
一个ftp类(ini.php)
2006/10/09 PHP
一个多文件上传的例子(原创)
2006/10/09 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
pageGroup.js实现分页功能
2019/07/27 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python 制作简单的音乐播放器
2020/11/25 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
自我鉴定书范文
2013/10/02 职场文书
批评与自我批评材料
2014/02/15 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
中班教师个人总结
2015/02/05 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android