This article illustrates the method of js+css to realize the imitation Sina Weibo search box. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<title>js+css imitation similar to Sina Weibo search box effect </title>
<style type= "Text/css" >
* {padding:0; margin:0;}
body {font-size:14px;}
#box {width:600px; margin:40px auto;}
#in {width:240px; height:24px line-height:24px; border:1px solid #369 border-radius:4px; Box-shadow:inset 0 0 2px #999; }
#suggest {display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;
border-radius:4px; Box-shadow:inset 0 0 2px #999; Overflow:hidden; }
#suggest a {display:block; color: #f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}
#suggest a:hover {background: #eee;}
#suggest a span {color#369;}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
Declare a lump variable for use below
var Obox=document.getelementbyid ("box");
Obj=document.getelementbyid ("in");
Osug=document.getelementbyid ("suggest");
Oa=osug.getelementsbytagname ("span");
Compatible with IE and Firefox browser, but the test found ie678 can IE9 but not in the deletion of the time cannot trigger, online check said there are IE9 this problem
Obj.oninput=obj.onpropertychange=onchange;
function onchange () {
var Txt=this.value;
var words=txt.length;
if (words==0) {
Osug.style.display= "None";
}else if (words<=8) {
osug.style.display= "Block";
for (Var i=0;len=oa.length,i<len;i++) {
Oa[i].innerhtml=txt;
}
}else if (words>8) {
osug.style.display= "Block";
var limit=txt.substring (0,8) + "...";
for (Var i=0;len=oa.length,i<len;i++) {
Oa[i].innerhtml=limit;
}
}
}
}
function Disbox () {
document.getElementById ("suggest"). style.display= "None";
}
</script>
<body>
<dl id= "box" >
<dt><input onblur= "Disbox ()" type= "text" name= "" id= "in"/></dt>
<DD id= "Suggest" >
<a href= "###" > Search "<span></span>" related microblogging </a>
<a href= "###" > Search "<span></span>" related users </a>
</dd>
</dl>
</body>
I hope this article will help you with your JavaScript programming.
