js实现匹配时换色的输入提示特效代码

 更新时间:2015年08月17日 15:54:11   作者:企鹅   我要评论

这篇文章主要介绍了js实现匹配时换色的输入提示特效代码,涉及javascript针对页面元素的匹配及鼠标事件的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现匹配时换色的输入提示特效代码。分享给大家供大家参考。具体如下:

这是一款js输入提示特效,当你在输入框中输入字母时,如果下边列出的类别中有与你字母相匹配的,那么这些内容将会变成红色,着重显示出来,与输入框下拉提示是基本是一样的,只是换了一个方式。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-tips-cha-color-codes/

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一种输入提示特效,匹配时换色</title>
<style type="text/css">
html, body { margin:20px; padding:0; }
body { color:#454444; padding: 0; font:12px/30px "宋体"; font-family:Tahoma;}
a { color:#454444; text-decoration:none; }
a:visited { color:#454444; }
a:hover, a:active, a:focus { color:#ff6842; text-decoration:underline; }
.fenlei {margin-bottom:30px; width:100%; float:left;}
.fenlei li { float:left; width:20%;}
.fenlei span,.fenlei span a,.fenlei span a:link,.fenlei span a:active,.fenlei span a:visited { color:#f35d61;}
.red{color:red;}
</style>
<script>
function e(a,f){
 for(var i=0,j=a.length;i<j;i++){
  f.call(a[i],i);
 }
}
function s(o){
 var a = document.getElementsByTagName("a"),
  r = new RegExp(o.value,"i");
 e(a,function(n){
  c = a[n].innerHTML;
  if(o.value!="" && r.test(c)){
   a[n].innerHTML = "<span>" + c.replace(/<[^>]*>/gi,"") + "</span>";
  }else{
   a[n].innerHTML = c.replace(/<[^>]*>/gi,"");
  }
 })
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="text" name="textfield" id="textfield" onkeyup="s(this)" />
 <input type="submit" name="button" id="button" value="提交" />
</form>
<div class="fenlei">
 <ul>
 <li><a href="#" target="_blank">Adidas阿迪达斯</a></li>
 <li><a href="#" target="_blank">AFU阿芙</a></li>
 <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
 <li><a href="#" target="_blank">AFU阿芙</a></li>
 <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
 </ul>
</div>
<div class="fenlei">
 <ul>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">Balo贝罗</a></li>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">barbie芭比</a></li>
 <li><a href="#" target="_blank">Balo贝罗</a></li>
 </ul>
</div>
</body>
</html>

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

相关文章

  • 在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱

    在JavaScript中遭遇级联表达式陷阱...
    2007-03-03
  • JavaScript 事件冒泡简介及应用

    JavaScript 事件冒泡简介及应用

    这篇文章有助于大家认识事件冒泡的一些知识。
    2010-01-01
  • JavaScript 学习笔记(七)字符串的连接

    JavaScript 学习笔记(七)字符串的连接

    javascript 字符串的连接效率问题,需要的朋友可以参考下。
    2009-12-12
  • 让IE8支持DOM 2(不用框架!)

    让IE8支持DOM 2(不用框架!)

    众所周知,IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor(单词好长……),并且这两个新方法居然只能用于DOM。
    2009-12-12
  • JavaScript返回网页中超链接数量的方法

    JavaScript返回网页中超链接数量的方法

    这篇文章主要介绍了JavaScript返回网页中超链接数量的方法,使用javascript中的document.links实现这一功能,需要的朋友可以参考下
    2015-04-04
  • 把input初始值不写value的具体实现方法

    把input初始值不写value的具体实现方法

    比如制作一个最常见的,input初始值,一般以前,我都只是写在input的value里,要把初始值单独写出来,于是我比较傻逼,就用<span>标签写,定位在input上,让它单击和input获焦上都消失
    2013-07-07
  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    相信大家阅读了Bootstrap第一篇文章后,对Bootstrap充满了探索欲望,小编也对Bootstrap产生了兴趣,所以今天再整理一篇关于Bootstrap的入门介绍,希望大家喜欢。
    2015-11-11
  • js实现卡片式项目管理界面UI设计效果

    js实现卡片式项目管理界面UI设计效果

    这篇文章主要介绍了js实现卡片式项目管理界面UI设计效果,该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息,需要的朋友可以参考下
    2015-12-12
  • javascript动态获取登录时间和在线时长

    javascript动态获取登录时间和在线时长

    这篇文章主要为大家详细介绍了javascript动态获取登录时间和在线时长的相关资料,获得登录时候的时间,用来和动态的时间做差来求时长,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript代码生成PDF文件的方法

    JavaScript代码生成PDF文件的方法

    如何使用js生成pdf文件呢,下面通过本文给大家分享JavaScript代码生成PDF文件的方法,需要的朋友参考下吧
    2016-02-02

最新评论