Home > Article > Web Front-end > How to implement imitating Sina Weibo search box using JS CSS

How to implement imitating Sina Weibo search box using JS CSS

PHPzOriginal: 2016-05-16 15:48:491521browse

This article mainly introduces the method of implementing JS CSS to imitate the Sina Weibo search box. It analyzes the javascript control skills for the search box style with examples. It has certain reference value. Friends in need can refer to it

The example in this article describes the method of implementing a Sina Weibo-like search box using JS CSS. Share it with everyone for your reference. The specific implementation method 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>JS+CSS仿类似新浪微博搜索框的效果</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(){
 //声明一坨变量供下面使用
 var obox=document.getElementById("box");
 obj=document.getElementById("in");
 osug=document.getElementById("suggest");
 oa=osug.getElementsByTagName("span");
//兼容ie和火狐浏览器的方式，但是经测试发现ie678可以ie9却不行在删除的时候无法触发，网上查下说有ie9这个问题
 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="###">搜“<span></span>”相关微博</a>
        <a href="###">搜“<span></span>”相关用户</a>
  </dd>
 </dl>
</body>
</html>

Related recommended downloads:

jQuery CSS3 animated expansion and contraction search box special effects

Jquery implements search box special effects that can be displayed and closed

Pure javaScript implementation of imitating Baidu search box association word prompt code

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of the mini-game "Flappy Pig" implemented in pure javascript_javascript skillsNext article：Example of the mini-game "Flappy Pig" implemented in pure javascript_javascript skills

See more

How to implement imitating Sina Weibo search box using JS CSS

Related articles