본문 바로가기
Back-end/Spring

[HTML] 자동완성 기능 만들기

by JiGyeong 2016. 5. 3.

인풋 이벤트 인식 :

키업: 키를 뗐을 떄 인식

키다운 : 새로운 글자가 입력되기 직전에 인식됨

체인지 : 포커스를 잃었을때 발생


자동완성시 글자를 눌렀다 뗐을때 계속 동기화됨


autocomplete.html



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
<html>
 
   <head>
      <style>
         
         #autocomplete {
            width:150px;
            height:200px; 
            background-color:pink; 
            z-index:3;
            position:relative;
            top:-20.7px;
            display:none;
         }
         
      </style>
      
      <script type="text/javascript">
      
         window.onload = function(){ 
                           // $("#searchKeyword")
            var searchKeyword = document.getElementById("searchKeyword");
            var autocomplete = document.getElementById("autocomplete");
            var keyword = "";
            
            searchKeyword.onkeydown = function(e) {
                searchKeyword.onkeyup(e);
            };
            
            // $("#searchKeyword").keyup(function(){...});
            searchKeyword.onkeyup = function(e){
 
               
             //  if ( e.char ) {
                  // IE 전용
                  keyword = searchKeyword.value;
              // }
               
               // if ( $("#searchKeyword").val() == "" ) {...}
               if ( keyword == "" ) {
                  // $("#autocomplete").hide();
                  autocomplete.style.display = "none";
               }
               else {
                  // $("#autocomplete").show();
                  autocomplete.style.display = "block";
                  fillSearchResult(autocomplete);
               }
               
            };
            
            /*
            searchKeyword.onkeyup = function(e) {
            
            
               // 백스페이스로 지웠을 때 처리
               if ( e.key == "Backspace" ) {
               
                  keyword = searchKeyword.value;
                  
                  if ( keyword == "" ) {
                     autocomplete.style.display = "none";
                  }
                  
                  console.log(keyword);
               }
            
            }*/
            
         };
         
         function fillSearchResult( autocomplete ) {
         
            autocomplete.innerHTML = "";
            
            var searchResults = ["테스트" , "테스트2", "테스트3"];
            
            for (var i=0; i < searchResults.length; i++) {
               autocomplete.innerHTML += "<div onclick='selectData(this);'>" + searchResults[i] + "</div>";
            }
            
         }
         function selectData(that) {
             var searchKeyword = document.getElementById("searchKeyword");
             searchKeyword.value = that.innerText;
             
             var autocomplete = document.getElementById("autocomplete");
             autocomplete.style.display="none";
         }
      
      </script>
   </head>
   <body>
      검색어를 입력하세요. <br/>
      <input type="text" id="searchKeyword" />
      <br/>
      검색 타입을 선택하세요.
      <div id="autocomplete" >
      </div>
   </body>
 
</html>
 
cs


결과창 :


그리고 자동완성 텍스트중 하나를 클릭하면

인풋창에 들어갈 수 있게끔 만들었다.





저작자표시

'Back-end > Spring' 카테고리의 다른 글

[JPA] 사용해보기  (2) 2016.05.04
[JPA] JPA에 관해..  (0) 2016.05.04
[HTML] 서버돌리지 않고 창 띄우기  (0) 2016.05.02
[HTML5] WebSocket을 이용한 채팅 만들기  (0) 2016.04.22
[HTML5] 웹소켓( WebSockat )  (2) 2016.04.22

관련글

티스토리툴바