JavaScript仿新浪微博搜索框功能
JavaScript仿新浪微博搜索框功能属于前端实例代码，有关更多实例代码大家可以查看。
本章节通过实例代码介绍一下如何实现新浪微博搜索框功能。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</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");
var obj=document.getElementById("in");
var osug=document.getElementById("suggest");
var oa=osug.getElementsByTagName("span");
obj.oninput=obj.onpropertychange=onchange;
obj.onblur=function(){disbox()}
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 index=0;len=oa.length,index<len;index++){
oa[index].innerHTML=txt;
}
}
else if(words>8){
osug.style.display="block";
var limit=txt.substring(0,8)+"...";
for( var index=0;len=oa.length,index<len;index++){
oa[index].innerHTML=limit;
}
}
}
}
function disbox(){
document.getElementById("suggest").style.display="none";
}
</script>
</head>
<body>
<dl id="box">
<dt><input type="text" name="" id="in"/></dt>
<dd id="suggest" >
<a href="###">搜“<span></span>”相关微博</a>
<a href="###">搜“<span></span>”相关用户</a>
</dd>
</dl>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
1.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
2.var obox=document.getElementById("box")，获取id属性值为box的元素对象。
3.var obj=document.getElementById("in")，获取id属性值为in的元素对象。
4.var osug=document.getElementById("suggest")，获取id属性值为suggest的元素对象。
5.var oa=osug.getElementsByTagName("span")，获取osug元素下的span元素对象集合。
6.obj.oninput=obj.onpropertychange=onchange，为obj元素注册oninput和onpropertychange事件处理函数，也就是obj元素值发生改变时会触发的事件。
7.obj.onblur=function(){disbox()}，为obj元素注册onblur事件处理函数。
8.function onchange(){}，当obj元素中的value值发生改变时要执行的函数。
9.var txt=this.value，obj元素的value值赋值给txt变量。
10.var words=txt.length，获取value值的字符串长度。
11.if(words==0){
osug.style.display="none";
}如果字符串长度为0，那么osug元素隐藏。
12.else if(words<=8){
osug.style.display="block";
for( var index=0;len=oa.length,index<len;index++){
oa[index].innerHTML=txt;
}
}如果字符串的长度小于8，那么就显示osug元素，然后为oa元素集合中的每一个span元素设置相关内容。
13.else if(words>8){
osug.style.display="block";
var limit=txt.substring(0,8)+"...";
for( var index=0;len=oa.length,index<len;index++){
oa[index].innerHTML=limit;
}
}如果字符串长度大于，那么将进行一定的截取字符串操作。
二.相关阅读:
1.getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
2.oninput可以参阅oninput和onpropertychange事件简单介绍一章节。
3.innerHTML属性可以参阅js innerHTML一章节。
4.substring()方法可以参阅javascript substring()一章节。
JavaScript仿新浪微博搜索框功能，这样的场景在实际项目中还是用的比较多的，关于JavaScript仿新浪微博搜索框功能就介绍到这了。