在文字框輸入關鍵字會彈出內容提示程式碼例項

antzone發表於2017-03-26
原文網址 : https://www.softwhy.com/article-4735-1.html

當前不少人性化的網站，在文字框或者搜尋框這樣類似的功能下了很多的功夫，能夠在很大程度上提高網站的人性化程度,比如在搜尋框輸入關鍵字的時候，能夠出現相匹配的下來提示內容，如果下拉的內容有使用者需要的選項，那麼就會給使用者帶來不少便利，下面就是一段能夠實現此功能的簡單程式碼，下面就進行一下分享，並對程式碼的實現進行詳細的註釋。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
sources= new Array("www.softwhy.com","www.baidu.com","www.google.com","softwhy.net"); 
tabinfo = ""; 
flag=new Array(sources.length); 
for(var index=0;index<flag.length;index++){
  flag[index]=false ; 
}
 
function immediately(){ 
  var element=document.getElementById("txt"); 
  if("\v"=="v"){ 
    element.onpropertychange=webChange; 
  }
  else{ 
    element.addEventListener("input",webChange,false); 
  } 
 
  function webChange(){ 
    var tab = document.all("dl1");
          
    for(var index=0;index<flag.length;index++){
      flag[index] = false ;//重新初始化 
    } 
         
    if(element.value){ 
      var content=document.getElementById("txt").value; 
      for(var index=0;index<sources.length;index++){ 
        if(sources[index].indexOf(content)!=-1){ 
          flag[index]=true;    
        } 
      } 
      for(var j=0;j<flag.length;j++){   
        if(flag[j]){
          if(tab.rows.length>0){ 
            for(var k=0;k<tab.rows.length;k++){ 
              if(tab.rows[k].cells[0].innerText.indexOf(content) == -1){
                tab.deleteRow(k); 
              }    
            }
          } 
          for(var k=0;k<tab.rows.length;k++){ 
            tabinfo += tab.rows[k].cells[0].innerText; 
          }   
          if(tabinfo.indexOf(sources[j]) == -1){  
            nrow = tab.insertRow(0); 
            newcell = nrow.insertCell(); 
            newcell.innerHTML = sources[j]  
          } 
          tabinfo = ""; 
        }  
      } 
    } 
  } 
} 
 
var lastObj=null;  
function setSingleBack(){ 
  event.srcElement.style.background="gray"; 
  forceBackColor(); 
  if(event.srcElement.tagName=="TD"){ 
    lastObj=event.srcElement; 
  } 
  fillData(); 
} 
function setAllBack(){ 
  event.srcElement.style.background="#CCCCCC"; 
} 
function forceBackColor(){ 
  if(lastObj!=null){
    lastObj.style.background="#F8F8FF";
  }
}
function fillData(){ 
  if(lastObj.innerHTML!=null){
    document.all.txt.value=lastObj.innerHTML;  
  }
} 
function init(){ 
  layer.style.top=txt.offsetTop+40; 
  layer.style.left=txt.offsetLeft; 
  layer.style.visibility="visible"; 
} 
function hideBelow(){ 
  layer.style.visibility="hidden"; 
}
window.onload=function(){
  var otxt=document.getElementById("txt");
  var odll=document.getElementById("dl1");
  immediately();
  otxt.onfocus=function(){
    init();
  }
  otxt.onblur=function(){
    hideBelow();
  }
  odll.onmouseout=function(){
    setAllBack();
  }
  odll.onmouseover=function(){
    setSingleBack();
  }
}
</script>
</head> 
<body> 
<input type="text" id="txt" style="height:20px"/> 
<div id="layer"> 
  <table id="dl1" cellspacing="0" border="0"></table> 
</div>
</body> 
</html>

相關文章