JavaScript仿新浪微博搜索框功能

最新推荐文章于 2023-12-04 10:57:08 发布

Return_KB

最新推荐文章于 2023-12-04 10:57:08 发布

阅读量1.1k

点赞数

分类专栏：前端js

前端js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html> 
 
 < 
 html 
 > 
 
 < 
 head 
 > 
 
 < 
 meta 
 charset 
 = 
 " utf-8" 
 > 
 
 < 
 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.ο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;
  }
}如果字符串长度大于，那么将进行一定的截取字符串操作。

效果如下：