利用js 進(jìn)行輸入框自動(dòng)匹配字符的小例子

更新時(shí)間：2013年06月29日 16:01:20 作者：

制作論壇用到的輸入框~想模仿百度之類的寫一個(gè)自動(dòng)匹配字符

html

<p><span style="font-size: 18px; ">輸入框自動(dòng)匹配字符~</span></p><p><span style="font-size: 18px; ">但是遇到一個(gè)問(wèn)題~所有匹配的字符要事先寫好~大概如果是大型網(wǎng)站的話~應(yīng)該是利用數(shù)據(jù)庫(kù)的記錄吧</span></p><p><span style="font-size: 18px; ">看代碼</span></p> 

html

復(fù)制代碼代碼如下:

<style> 
ul,li{margin: 0; padding: 0;width:100%;} 
</style>
<script language="javascript" type="text/javascript"> 
function checkword() 
{ 
   var wordvalue=document.getElementById("word").value.toLowerCase(); 
   var alltxt="all|big|cut|car\|daph8|eeg|egg|eat|fuck|fuck you|fix|good|hand|hidden|ill|jack|jad|kevin|long|man|number|oio|part|pp|quit|QQ|rest|reg|set|submit|time|tag|uuzo|view|windows|want|xy|xun|young|yuyu|z|David|David|哈哈|";//這里就是你所想要匹配的字符，可惜只能用于小型的論壇 
   var alltxtalltxtpp=alltxt.toLowerCase(); 
   var alltxtalltxt_xiang=alltxt.split("|"); 
   var alltxt_xiang1=alltxtpp.split("|"); 
   var inhtml="<ul>" 
   var isyou=0; 
   for (i=0;i<alltxt_xiang1.length;i++) 
   { 
       if (alltxt_xiang1[i].substr(0,wordvalue.length)==wordvalue) 
       { 
           inhtmlinhtml=inhtml+"<li onclick=\"document.getElementById('word').value=this.innerHTML;document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">"+alltxt_xiang[i]+"</li>"; 
           isyou=1; 
       } 
   } 
   inhtmlinhtml=inhtml+"</ul>"; 
   if (isyou==1) 
   { 
       document.getElementById("showmenu").innerHTML=inhtml; 
       document.getElementById("showmenu").style.display=""; 
   } 
   else 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
   if (wordvalue=="") 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
} 
</script> 
<input type="text" name="word" size="20" id="word" onkeyup="checkword()" style="border:1px solid #666666;width:200px;height:25px;"> 
<div style="position: absolute; width: 200px; height: 100px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div> 

您可能感興趣的文章:

相關(guān)文章

layui table 表格模板按鈕的實(shí)例代碼
今天小編就為大家分享一篇layui table 表格模板按鈕的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
前端構(gòu)建工具之gulp的配置與搭建詳解
gulpjs是一個(gè)前端構(gòu)建工具，與gruntjs相比，gulpjs無(wú)需寫一大堆繁雜的配置參數(shù)，API也非常簡(jiǎn)單，學(xué)習(xí)起來(lái)很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。
2017-06-06
javascript獲取元素離文檔各邊距離的方法
這篇文章主要介紹了javascript獲取元素離文檔各邊距離的方法,以一個(gè)自定義函數(shù)形式分析了javascript針對(duì)文檔各邊距離的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
JS實(shí)現(xiàn)DOM節(jié)點(diǎn)插入操作之子節(jié)點(diǎn)與兄弟節(jié)點(diǎn)插入操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)DOM節(jié)點(diǎn)插入操作之子節(jié)點(diǎn)與兄弟節(jié)點(diǎn)插入操作,涉及JavaScript節(jié)點(diǎn)的創(chuàng)建、添加簡(jiǎn)單操作技巧,需要的朋友可以參考下
2018-07-07
html頁(yè)面顯示年月日時(shí)分秒和星期幾的兩種方式
在html頁(yè)面中顯示時(shí)間是很常見(jiàn)的，實(shí)現(xiàn)的方法有很多，下面為大家簡(jiǎn)單介紹兩種方式，有需求的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
使用postMesssage()實(shí)現(xiàn)跨域iframe頁(yè)面間的信息傳遞方法
下面小編就為大家?guī)?lái)一篇使用postMesssage()實(shí)現(xiàn)跨域iframe頁(yè)面間的信息傳遞方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-03-03
微信小程序調(diào)用支付接口的完整流程記錄
我們?cè)谧鲂〕绦蛑Ц断嚓P(guān)的開(kāi)發(fā)時(shí),總會(huì)遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序調(diào)用支付接口的完整流程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-02-02
利用JavaScript實(shí)現(xiàn)靜態(tài)圖片局部流動(dòng)效果
如果你有玩過(guò)《王者榮耀》、《陰陽(yáng)師》?等手游，一定注意到過(guò)它的啟動(dòng)動(dòng)畫、皮膚立繪卡片等場(chǎng)景，經(jīng)常采用靜態(tài)底圖加局部液態(tài)流動(dòng)效果的簡(jiǎn)單動(dòng)畫，本文將利用JavaScript實(shí)現(xiàn)這一效果，需要的可以參考一下
2022-08-08
JavaScript代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
JS去掉字符串末尾的標(biāo)點(diǎn)符號(hào)及刪除最后一個(gè)字符的方法
這篇文章主要介紹了JS去掉字符串末尾的標(biāo)點(diǎn)符號(hào)及刪除最后一個(gè)字符的方法,需要的朋友可以參考下
2017-10-10