Das Beispiel in diesem Artikel beschreibt, wie man ein Sina Weibo-ähnliches Suchfeld mit JS CSS implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: Code kopieren Der Code lautet wie folgt: JS CSS imitiert den Effekt des Sina Weibo-Suchfelds <br> * { padding:0; margin:0;}<br> Körper { Schriftgröße: 14px; #box { width:600px; margin:40px auto;}<br> #in { width:240px; line-height:24px; border:1px solid #369; box-shadow:inset 0 0 2px #999; #suggest { display:none; position:relative; width:1px; border-top:0 none;<br> border-radius:4px; box-shadow:inset 0 0 2px #999; #suggest a { display:block; height:24px; #suggest a:hover {background:#eee;}<br> #suggest a span { color#369;}<br> <br> window.onload=function(){<br> //Deklarieren Sie eine Reihe von Variablen zur Verwendung unten<br> var obox=document.getElementById("box");<br> obj=document.getElementById("in");<br> osug=document.getElementById("suggest");<br> oa=osug.getElementsByTagName("span");<br> //Kompatibel mit IE- und Firefox-Browsern, aber nach dem Testen wurde festgestellt, dass ie678 funktionieren kann, aber nicht ie9. Ich habe online nachgesehen, dass es ein Problem mit ie9 gibt <br> obj.oninput=obj.onpropertychange=onchange;<br> Funktion onchange(){<br> var txt=this.value;<br> var Words=txt.length;<br> if(words==0){<br> osug.style.display="none";<br> }else if(words<=8){<br /> osug.style.display="block";<br /> for( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=txt;<br /> }<br /> }else if(words>8){<br> osug.style.display="block";<br> var limit=txt.substring(0,8) "...";<br> for( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=limit;<br /> }<br /> }<br /> }<br /> }<br /> Funktion disbox(){<br /> document.getElementById("suggest").style.display="none";<br /> }<br /> Suche nach „“ im Zusammenhang mit Weibo & Lt; a href = "###" & gt; Suche "& lt; span & gt;" & lt;/a & gt;
