JS实现关键字搜索时的相关下拉字段效果

前端技术 2023/09/06 JavaScript 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=GBK\" /> 
<title>Hello World</title> 
<link href=\"style.css\" rel=\"external nofollow\" rel=\"stylesheet\" type=\"text/css\"> 
 
<script type=\"text/javascript\"> 
  sources= new Array(\"www.sina.com\",\"www.baidu.com\",\"www.google.com\",\"www.sina.org\",\"www.baidu.ogr.cn\"); 
  tabinfo = \"\"; 
  flag = new Array(sources.length); 
  for(var i=0;i<flag.length;i++) 
    flag[i] = false ; 
   
  function immediately(){ 
     
    var element = document.getElementById(\"i1\"); 
    if(\"\\v\"==\"v\") { 
      element.onpropertychange = webChange; 
    }else{ 
      element.addEventListener(\"input\",webChange,false); 
    } 
    function webChange(){ 
      var tab = document.all(\"dl1\"); 
      for(var i=0;i<flag.length;i++) 
        flag[i] = false ;//重新初始化 
      if(element.value){ 
        var content = document.getElementById(\"i1\").value; 
        for(var i = 0 ;i < sources.length ; i ++){ 
          if(sources[i].indexOf(content) != -1){ 
            flag[i] = true;    
          } 
        } 
        for(var j=0;j<flag.length;j++){ 
           
          if(flag[j]){//sources[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 = \"\"; 
          } 
           
           
        } 
      } 
    } 
  } 
 
</script> 
<script language=\"javascript\"> 
  var lastObj=null;  
  function backBlack(){ 
    event.srcElement.style.background=\"gray\"; 
    forceBackC6(); 
    if(event.srcElement.tagName==\"TD\"){ 
      lastObj=event.srcElement; 
    } 
    fillData(); 
  } 
  function backC6(){ 
    event.srcElement.style.background=\"#CCCCCC\"; 
  } 
  function forceBackC6(){ 
   if(lastObj!=null) 
    lastObj.style.background=\"#F8F8FF\"; 
  } 
 
 
  function fillData(){ 
    if(lastObj.innerHTML!=null) 
     document.all.i1.value=lastObj.innerHTML;  
  } 
   
  function init(){ 
    Layer1.style.top=i1.offsetTop+40; 
    Layer1.style.left=i1.offsetLeft; 
    Layer1.style.visibility=\"visible\"; 
  } 
  function hideBelow(){ 
    Layer1.style.visibility=\"hidden\"; 
  } 
</script> 
 
</head> 
<body> 
<input type=\"text\" id=\"i1\" style=\"height:20px\" onFocus=\"init()\" onBlur=\"hideBelow()\" /> 
<script type=\"text/javascript\"> 
immediately(); 
</script> 
<div id=\"Layer1\"> 
 <table id=\"dl1\" class=\"midHead\" cellspacing=\"0\" onMouseOut=\"backC6()\" onMouseOver=\"backBlack()\" border=\"0\" > 
   
 </table> 
</div> 
 
<br> 
 
</body> 
</html>

本文地址：https://www.stayed.cn/item/17500

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案