JavaScript仿新浪微博搜尋框功能

admin發表於2018-02-07
JavaScript

本章節通過例項程式碼介紹一下如何實現新浪微博搜尋框功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章節。

相關文章