js實(shí)現(xiàn)匹配時(shí)換色的輸入提示特效代碼

更新時(shí)間：2015年08月17日 15:54:11 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)匹配時(shí)換色的輸入提示特效代碼,涉及javascript針對(duì)頁(yè)面元素的匹配及鼠標(biāo)事件的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)匹配時(shí)換色的輸入提示特效代碼。分享給大家供大家參考。具體如下：

這是一款js輸入提示特效，當(dāng)你在輸入框中輸入字母時(shí)，如果下邊列出的類別中有與你字母相匹配的，那么這些內(nèi)容將會(huì)變成紅色，著重顯示出來(lái)，與輸入框下拉提示是基本是一樣的，只是換了一個(gè)方式。

運(yùn)行效果截圖如下：

在線演示地址如下：

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

具體代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一種輸入提示特效，匹配時(shí)換色</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阿迪達(dá)斯</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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)計(jì)算
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)的計(jì)算，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
js 自帶的sort() 方法全面了解
下面小編就為大家?guī)?lái)一篇js 自帶的sort() 方法全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
分享一個(gè)插件實(shí)現(xiàn)水珠自動(dòng)下落效果
本篇文章給大家分享一個(gè)插件制作水珠自動(dòng)下落效果，效果非常逼真，感興趣的朋友可以添加下面代碼運(yùn)行看看效果哦
2016-06-06
JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速的方法詳解
在我們的日常生活中離不開網(wǎng)絡(luò)，而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗(yàn)。本文就來(lái)帶大家了解如何用JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速，需要的可以參考一下
2023-01-01
百度搜索框智能提示案例jsonp
這篇文章主要介紹了百度搜索框智能提示案例jsonp的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
uniapp中table表格設(shè)置寬度無(wú)效的原因以及解決方法
項(xiàng)目中遇到table表格單元格不整齊、錯(cuò)位等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中table表格設(shè)置寬度無(wú)效的原因以及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法
這篇文章主要介紹了JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法,涉及javascript針對(duì)數(shù)組的遍歷、判斷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
小程序tab頁(yè)無(wú)法傳遞參數(shù)的方法
這篇文章主要介紹了小程序tab頁(yè)無(wú)法傳遞參數(shù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JS異步編程Promise對(duì)象詳解
本文詳細(xì)講解了JS異步編程之Promise對(duì)象，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
Google Map Api和GOOGLE Search Api整合實(shí)現(xiàn)代碼
將GOOGLE MAP API 和 GOOGLE Search API 進(jìn)行整合，我用面向?qū)ο蟮姆绞綄懥艘粋€(gè)類，通過(guò)傳一個(gè)經(jīng)緯度進(jìn)去，自動(dòng)通過(guò)GOOGLE LOCAL SEARCH獲取附近的相關(guān)信息。比如餐廳、景點(diǎn)等，反過(guò)來(lái)標(biāo)到地圖上，并可在任意容器內(nèi)顯示。
2009-07-07