A small example of using JS to automatically match characters in an input box _javascript tips

Html

Copy Code code as follows:

<p><span style= "FONT-SIZE:18PX; "> Input box automatically matches character ~</span></p><p><span style=" FONT-SIZE:18PX; "> but encountered a problem ~ all the matching characters to write well in advance ~ probably if it is a large website ~ should be the use of database records bar </span></p><p><span style=" Font-size: 18px; "> See Code </span></p>

Html

Copy Code code as follows:

<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| haha | ";/ /Here is the character you want to match, unfortunately only for small forums
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= "id=" word "onkeyup=" Checkword () "style=" border:1px solid #666666; : 200px;height:25px; " >
<div style= "Position:absolute; width:200px; height:100px; Z-index:1; left:10px; top:40px;border:1px solid #666666;d isplay:none; "id=" ShowMenu "></div>