输入框自动下拉补全（仿百度、谷歌搜索框提示）

2016/01/07 23833

输入框自动下拉补全（仿百度、谷歌搜索框提示）
?
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
   /*自动下拉补全 zhk */
   var highlightindex=-1;//当前高亮的节点
  $(document).ready(function(){
  var wordInput=$("#word");
  var wordInputOffset=wordInput.offset();
 
   $("#auto").hide().css("border","1px black solid").css("position","absolute")
    .css("top",wordInputOffset.top+wordInput.height()+5+"px")
    .css("left",wordInputOffset.left+"px").width(wordInput.width()+2);
 
  wordInput.keyup(function (event){
 
    var myEvent=event||window.event;
    var keyCode=myEvent.keyCode;
    if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
 
     var wordText=$("#word").val();
      var autoNode=$("#auto");
     if(wordText!=""){
     
        
       var wordNodes=$("span");
       
       autoNode.html("");
       wordNodes.each(function(i){
          var wordNode=$(this);
          var newDivNode=$("<div>").attr("id",i);
           
          newDivNode.html(wordNode.text()).appendTo(autoNode);
          newDivNode.mouseover(function(){//鼠标进入
            if(highlightindex!=-1){
               $("#auto").children("div").eq(highlightindex)
               .css("background-color","white");
             }
             highlightindex=$(this).attr("id");
             $(this).css("background-color","red");
           })
 
           newDivNode.mouseout(function(){//鼠标移除
             $(this).css("background-color","white");
            
             })
newDivNode.click(function(){//点击
             var comText=$(this).text();
             $("#auto").hide();
          highlightindex=-1;
          $("#word").val(comText);
             })
 
        })
        if(wordNodes.length>0){
          autoNode.show();
        }else{
          autoNode.hide();
          highlightindex=-1;
         }
      
     }else{
      autoNode.hide();
        highlightindex=-1;
       }
 
     }else if(keyCode==38||keyCode==40){
         if(keyCode==38){//向上
            var autoNodes=$("#auto").children("div");
             if(highlightindex!=-1){
                autoNodes.eq(highlightindex).css("background-color","white");
                 highlightindex--;
              }else{
                highlightindex=autoNodes.length-1;
              }
              
              if(highlightindex==-1){
                highlightindex=autoNodes.length-1;
              }
              autoNodes.eq(highlightindex).css("background-color","red");
          }
          if(keyCode==40){
           var autoNodes=$("#auto").children("div");
             if(highlightindex!=-1){
                autoNodes.eq(highlightindex).css("background-color","white");
              }
              highlightindex++;
              if(highlightindex==autoNodes.length){
                highlightindex=0;
              }
              autoNodes.eq(highlightindex).css("background-color","red");
          }
      }else if(keyCode==13){
         
        if(highlightindex!=-1){
          var comText=$("#auto").hide().children("div").eq(highlightindex).text();
          highlightindex=-1;
          $("#word").val(comText);
          }else{
            alert("文本框中的【"+$("#word").val()+"】被提交了");
            $("#auto").hide();
             $("#word").get(0).blur();//失去焦点
          }
       }
   });
 
   $("input [type='button']").click(function(){
     alert("文本框中的【"+$("#word").val()+"】被提交了");
   });
 
 
})
</script>
 </HEAD>
 
 <BODY>
  <input type="text" id="word">
<input type="button" value="提交">
<div id="auto"></div>
<p>
<span>aaa</span>
<span>abc</span>
<span>abd</span>
<span>bbc</span>
<span>beb</span>
<span>cer</span>
<span>erd</span>
<span>beg</span>
<p>
 </BODY>
</HTML>

编程技巧