Contoh dalam artikel ini menerangkan cara melaksanakan kotak carian seperti Sina Weibo menggunakan JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: JS CSS meniru kesan kotak carian Sina Weibo <br> * { padding:0; margin:0;}<br> badan { saiz fon: 14px }<br> #box { lebar:600px; jidar:40px auto;}<br> #dalam { width:240px; tinggi: garis-tinggi: 24px; #cadangkan { paparan:tiada; kedudukan atas:-1px; sempadan-radius:4px; box-shadow: inset 0 0 2px #999; #cadangkan { display:block; color:#f00; tinggi baris:24px; #cadangkan a:hover { latar belakang:#eee;}<br> #cadangkan rentang { color#369;}<br> <br> window.onload=function(){<br> //Isytiharkan sekumpulan pembolehubah untuk digunakan di bawah<br> var obox=document.getElementById("box");<br> obj=document.getElementById("in");<br> osug=document.getElementById("cadangkan");<br> oa=osug.getElementsByTagName("span");<br> //Serasi dengan pelayar IE dan Firefox, tetapi selepas ujian, didapati bahawa ie678 boleh berfungsi tetapi tidak ie9. Ia tidak boleh dicetuskan apabila memadamkan dalam talian dan mengatakan bahawa terdapat masalah dengan ie9 <br> obj.oninput=obj.onpropertychange=onchange;<br> fungsi onchange(){<br> var txt=this.value;<br> var words=txt.length;<br> jika(perkataan==0){<br> osug.style.display="none";<br> }lain jika(perkataan<=8){<br /> osug.style.display="block";<br /> untuk( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=txt;<br /> }<br /> }lain jika(perkataan>8){<br> osug.style.display="block";<br> var limit=txt.substring(0,8) "...";<br> untuk( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=limit;<br /> }<br /> }<br /> }<br /> }<br /> fungsi disbox(){<br /> document.getElementById("cadangkan").style.display="none";<br /> }<br /> </skrip><br> </head><br> <badan><br> <dl id="box"><br> <dt><input onblur="disbox()" type="text" name="" id="in" /></dt><br> <dd id="cadangkan" ><br> <a href="###">Cari "<span></span>" berkaitan Weibo</a><br> <a href="###">Cari pengguna yang berkaitan dengan "<span></span>"</a><br> </dd><br> </dl><br> </body><br> </html><br><br> <br>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang. <br> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
