티스토리 뷰

프로그래밍/Javascript

NotePad++ 로 자동완성 구현하기

안싱미 2016. 5. 3. 15:22

자동완성 검색창 만들기


새파일을 만든다.






일단 골격을 잡고, 실행을 해본다.

이렇게 실행이 된다.



z-index

- The z-index property specifies the stack order of an element.

- An element with greater stack order is always in front of an element with a lower stack order.



position

노란 박스가 있으면 가려지기를 원하기 때문에,  그렇다면 , z-index가 동작을 하게끔 해야하고, 그러려면 position이 필요하다.


Display

글자를 쓰면 보이고, 글자를 안쓰면 안보이게하려면, 일단은 display를 none으로 해둔다.



textbox에 작성을 했다. 라는 것을 알려면 3가지 이벤트가 필요하다


Keyup, keydown, change


keyup 눌럿다가 뗏을때 keydown 헌번 누를때 change 포커스를 옮길 때 발생


자동완성할 때 어떤 것을 쓰면 적합할 까? Keyup!




그런데, 네이버나 구글에서 검색을 하면 순간적으로 자동완성이 되는데, 여기에서는 Keypress를 쓰고 있는 것이다. Keypress는 계속 누르는 동안을 모두 감지한다.





이렇게 하면 글자가 입력될 때, 자동완성창이 나타나는 것을 확인할 수 있다.






이제는 노란 자동완성창에 내가 입력한 글들을 보여주는 것을 처리해야한다.

그렇다면 입력하고 있는 키워드들을 변수에 저장해주는 것이 필요하다.

아래 코드처럼 바꾸어 주자. Keypress의 단점은 backspace를 인식하지 못하는 것이기 때문에,  이걸 인식하게끔 만들어주어야한다.





그러면 콘솔창에 아래와 같이 찍히는 것을 볼 수 있다.




이제는 보여주게끔 만들어보자. 간단하게 div 태그를 이용해서 안에 데이터를 채워넣을 것이다. 이를 처리해주기 위한 function을 새로 만들어준다.



어떻게 하면 채워질까?


이 함수를 넣어준다. 그러면,



이런 결과를 볼 수 있다.


이제는 결과를 클릭 할 수 있도록 만들어 주자.


This

자바 스크립트에서 활용하는 this는 자바에서의 this와 다르다. 호출자를 말한다. 즉, 여기서 this 는 div이다.


autocomplete.innerHTML += "<div onclick='alert(this.innerText);'>" + searchResults[i] + "</div>";


이렇게 바꾸고 다시 실행해보자.



이거를 function으로 만들어서 뺀다.



이렇게 하면 이제

이렇게 잘 나온다. 한글 처리까지 하고


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
<html>
    <head>
        <style>
            #autocomplete {
                width: 150px;
                height: 200px;
                background-color : yellow;
                z-index: 3;
                position: relative;
                top: -19px;
                left: 0px;
                display: none;
            }
        </style>
        
        <script type="text/javascript">
        
            window.onload = function() {
                                    // jQuery에서 $("#searchKeyword") 와 동일
                var searchKeyword = document.getElementById("searchKeyword");
                var autocomplete = document.getElementById("autocomplete");
                var keyword ="";
                
                //keypress와 같은 효과를 만들 수 있다.
                searchKeyword.onkeydown = function(e){
                    searchKeyword.onkeyup(e);
                };
                
                // $("#searchKeyword").keyup(function() {...}); 와 동일
                searchKeyword.onkeyup = function( e ){
                
                    console.log(e);
                    
                    //글자가 없으면 false 있으면 true
                    //if( e.char ) {
                        //IE 전용
                        //방금 쓴 값을 keyword에 넣어준다.
                        //keyword = searchKeyword.value + e.char;
                        keyword = searchKeyword.value;
                    //}
                    
                    //비어있다면 div를 안보여주고,
                    //if ( $("searchKeyword").val() == "" ){...} 와 동일
                    if( keyword == ""){
                        // $("#autocomplete").hide(); 와 동일
                        autocomplete.style.display = "none";
                    }
                    else{
                        // 안비어있다면 div를 보여준다.
                        // $("#autocomplete").show();
                        autocomplete.style.display = "block";
                        fillSearchResult( autocomplete );
                    }
                };
                
                /*
                //backspace로 지웠을 때 처리
                searchKeyword.onkeyup = function( e ){
                                        
                   if(e.key == "Backspace"){
                      keyword = searchKeyword.value;
                                                 // 0 : backspace
                      //keyword = keyword.substring(0, keyword.length-1);
                      
                          if( keyword == "" ){
                             autocomplete.style.display = "none";
                          }
                      console.log(keyword);
                    }
                };
                
                */
            };
            
            
            
            //메소드
            function fillSearchResult( autocomplete ) { 
            
                autocomplete.innerHTML = "";
                var searchResults = ["첫 번째 결과", "두 번째 결과", "세번째 결과"];
                for( var i = 0 ; i < searchResults.length; i++ ){
                    // $("#autocomplete").append("<div>결과...</div>"); 와 동일
                    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



전체코드 이렇게 자동완성 완성!


'프로그래밍 > Javascript' 카테고리의 다른 글

팝업창 띄우기  (0) 2016.05.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함