인풋 이벤트 인식 :
키업: 키를 뗐을 떄 인식
키다운 : 새로운 글자가 입력되기 직전에 인식됨
체인지 : 포커스를 잃었을때 발생
자동완성시 글자를 눌렀다 뗐을때 계속 동기화됨
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 |
