JavaScript仿新浪微博搜索框功能

最新推荐文章于 2025-10-01 09:55:53 发布

翻译最新推荐文章于 2025-10-01 09:55:53 发布 · 1.2k 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript实现的新浪微博搜索框实时提示功能。该功能可以根据用户输入的内容实时展示相关搜索建议，包括对输入长度的判断及提示内容的动态更新。

<!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;
  }
}如果字符串长度大于，那么将进行一定的截取字符串操作。

效果如下：