当前不少人性化的网站,在文本框或者搜索框这样类似的功能下了很多的功夫,能够在很大程度上提高网站的人性化程度,比如在搜索框输入关键字的时候,能够出现相匹配的下来提示内容,如果下拉的内容有用户需要的选项,那么就会给使用者带来不少便利,下面就是一段能够实现此功能的简单代码,下面就进行一下分享,并对代码的实现进行详细的注释。

代码如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
sources= new Array("www.51qianduan.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>

代码描述:js文本框 输入关键字 弹出内容提示。js文本框输入关键字弹出内容提示源码实例



177 236



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
admin :  好用·
2020-04-07 12:48:40



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到