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

时间:2022-09-13 20:23:21
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!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>