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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js正则匹配出所有图片及图片地址src的方法

    本文实例讲述了js正则匹配出所有图片及图片地址src的方法.分享给大家供大家参考.具体分析如下: 有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据 平时也没怎么用正则,一不学就忘,最近项目需要,然后又去goole了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用: 实现:通过js正则匹配出所有图片及所有图片地址src. 思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 从匹配出来的

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

    现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东. 复制代码 代码如下: <HTML><HEAD><title>带输入匹配的文本框</title><style>body,div {font-family:verdana;line-height:100%;font-size:10pt;}input {width:

  • js实现带搜索功能的下拉框实时搜索实时匹配

    js实现带搜索功能的下拉框实时搜索实时匹配

    1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • js使用正则子表达式匹配首字母与尾字母相同单词的方法

    本文实例讲述了js使用正则子表达式匹配首字母与尾字母相同单词的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> //子表达式实例:找到首字母与尾字母相同的单词 function t1(){  var con = document.getElementsByName('content')[0].value;  var reg = /\b(\w

  • Js 实现表格隔行换色一例

    Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:

  • JS实现简洁(隔行换色、高亮显示)表格特效

    JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no

  • JS+CSS实现Li列表隔行换色效果的方法

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • js正则表达式匹配数字字母下划线等

    1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾: ^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$ 其中: ^ 与字符串开始的地方匹配 (?!_) 不能以_开头 (?!.*?_$) 不能以_结尾 [a-zA-Z0-9_\u4e00-\u9fa5]+ 至少一个汉字.数字.字母.下划线 $ 与字符串结束的地方匹配 放在程序里前面加@,否则需要\\进行转义 @"^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]

  • 解决js正则匹配换行问题实现代码

    复制代码 代码如下: <div id="main"> <div id="left"> </div> <div id="right"> php </div> </div> 如果DIV内没有内容则不换行 把上面的改为: 复制代码 代码如下: <div id="main"> <div id="left"></di

随机推荐