js 模糊提示

最新推荐文章于 2024-06-25 16:30:48 发布

原创最新推荐文章于 2024-06-25 16:30:48 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#QQ #Apple #REST #Windows

本文提供了一段使用JavaScript实现的输入提示代码，该代码能够根据用户在文本框中输入的内容，实时显示可能的匹配选项供用户选择。通过分析内嵌的HTML与JavaScript代码，可以了解到其实现原理及用到的技术。

[quote]本文转载别人的代码。原来的网址忘记了[/quote]


<html> 
<body> 
<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="管理员|apple苹果|all全|big大|bad坏|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.cn|uuzo|view|windows|want|xy|xun|young|yuyu|zoo|Zzz|锋.David|David|哈哈|www.uuzo.cn|www.uuzo.com"; 
   var alltxtpp=alltxt.toLowerCase(); 
   var alltxt_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) 
       { 
           inhtml=inhtml+"<li onclick=\"document.getElementById('word').value=this.innerHTML"+wordvalue+";document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">"+alltxt_xiang[i]+"</li>"; 
           isyou=1; 
       } 
   } 
   inhtml=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></body></html>