<!DOCTYPE html><html><head><metacharset=" utf-8"><title>新浪微博搜索框功能</title><styletype="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><scripttype="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><dlid="box"><dt><inputtype="text"name=""id="in"/></dt><ddid="suggest"><ahref="###">搜“<span></span>”相关微博</a><ahref="###">搜“<span></span>”相关用户</a></dd></dl></body></html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
1.window.οnlοad=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.οninput=obj.onpropertychange=onchange，为obj元素注册oninput和onpropertychange事件处理函数，也就是obj元素值发生改变时会触发的事件。
7.obj.οnblur=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;
}
}如果字符串长度大于，那么将进行一定的截取字符串操作。
效果如下：
