JS + CSS implements a method similar to the search box on Sina Weibo, jscss
This article describes how to use JS + CSS to simulate the Sina Weibo search box. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Effect of JS + CSS imitation similar to search box on Sina Weibo </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 set of variables 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 browsers, but the test shows that ie678 can be ie9 but cannot be triggered when it is deleted. Check the Internet to check whether ie9 is a 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>
</Head>
<Body>
<Dl id = "box">
<Dt> <input onblur = "disbox ()" type = "text" name = "" id = "in"/> </dt>
<Dd id = "suggest">
<A href = "###"> Search for Weibo related to "<span> </span>" </a>
<A href = "###"> search for "<span> </span>" related users </a>
</Dd>
</Dl>
</Body>
</Html>
I hope this article will help you design javascript programs.