336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
자동 완성
NotePad++로 autocomplete.html을 생성해서 자동완성 기능을 만들어본다
그리고 div를 보여주기 위해서 style을 통해서 css을 적용해준다
이젠 searchKeyword 위 아래로 글자를 적어본다
그리고 z-index를 적용시키기 위해서 position을 relative로 준다
float을 하지 않고 상대적인 위치를 잡아주기 위함이다
다음과 같은 모양을 만들기 위해서 top과 left로 움직이고 크기를 맞춘 후 display=none을 지정해서 보여주지 않는다
이제 검색어를 입력할 때 키 입력을 알기 위해서는 keyup과 keydown, change를 통해서 알 수 있다
이벤트를 사용하기 위해서 script를 사용한다
onkeyup을 통해서 key up 시 이벤트를 지정할 수 있다 우선은 테스트를 진행해보기 위해서 alert를 띄워본다
검색창에 입력 시 계속 이벤트를 주게 된다 keyup이외에도 keypress가 있는데 press는 누르고 있는 동안에도 이벤트를 지정하고 싶을 때 사용한다 GOogle의 자동완성은 KeyPress의 기능이고 Naver는 KeyUp을 사용한 기능이게 된다
우선 키를 누를 때 keyword 값이 비어 있다면 자동 완성 창을 보여주지 않기 위해서 아래와 같이 작성한다
하지만 위와 같이 작성되면 계속 document.getElement를 가져오기 때문에 밖으로 빼주면 효율적으로 사용할 수 있다
그리고 else인 경우 value가 있는 경우에 보이게 else 문을 정의한다
그러나 press는 첫 글자 입력 시 빈 상태였기 때문에 이벤트를 실행 하지 않고 두번 째 글자부터 인식하여 실행을 하게 되는데
이벤트를 통해서 입력된 값을 다시 넣어주어 인식을 시킬 수 있다
*Source Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// $("#searchKeyword").keyup(function() {...}); 와 동일
searchKeyword.onkeypress = function( e ){
console.log(e);
//글자가 없으면 false 있으면 true
if( e.char ) {
//IE 전용
//방금 쓴 값을 keyword에 넣어준다.
keyword = searchKeyword.value + e.char;
}
//비어있다면 div를 안보여주고,
//if ( $("searchKeyword").val() == "" ){...} 와 동일
if( keyword == ""){
// $("#autocomplete").hide(); 와 동일
autocomplete.style.display = "none";
}
else{
// 안비어있다면 div를 보여준다.
// $("#autocomplete").show();
autocomplete.style.display = "block";
}
};
|
cs |
keypress는 백스페이스 즉 삭제하는 기능을 인식하지 못하는데 그렇기 때문에 다른 방식으로 적용 시킨다
keydown을 이용해서 백스페이스를 인식하고 비었을 시 자동완성 창을 없애준다
*Source Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//backspace로 지웠을 때 처리
searchKeyword.onkeydown = function( e ){
if(e.charCode == "0"){
keyword = searchKeyword.value;
// 0 : backspace
keyword = keyword.substring(0, keyword.length-1);
if( keyword == "" ){
autocomplete.style.display = "none";
}
console.log(keyword);
}
};
|
cs |
이제는 보여줄 때 결과를 보여주기 위해서 function을 생성한다
그런 후 보여줄 때 펑션을 실행시키면 된다
결과가 나오는 것을 볼 수 있다
한번 입력 시 마다 append처리 된 것과 같이 계속 추가가 된다 이제는 결과로 받아온 배열을 보여주기 위해서 for를 이용해서
출력을 해준다
그러나 새로 검색할 때 마다 초기화를 시켜줘야 검색된 것만큼 추가가 되서 보여주되 기존 내용은 삭제되게 된다
이젠 나온 결과를 클릭할 수 있게 만들기 위해서 div 태그안에 onclick을 적어주면 된다
this는 현재 호출한 이벤트를 의미한다
selectData를 function으로 재정의 한다
위와 같이 작성하면 문제없이 결과가 나온다
this로 보내고 that으로 받아 출력이 가능하다
this로 function으로 보내고 function 내에서 this로 출력을 한다면 undefined 되어 진다
이제 selectData에서 눌렀을 때 searchKeyword를 채워주고 자동 완성 창을 없애주는 로직을 작성한다
*Source Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function fillSearchResult(autocomplete) {
autocomplete.innerHTML = "";
var searchResults = ["첫 번째 결과", "두 번째 결과", "세 번째 결과"];
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";
}
|
cs |
위와 같이 작성하게 되면 즉 입력창에 입력 받을 때 onkeypress를 하게 되면 한글을 입력 받을 수 없게 된다
그러한 방법은 onkeyup을 통해서만 접근이 가능한데 그렇게 하기 위해서는 소스를 약간 수정 해야한다
우선 백스페이스로 지웠을 시 안보여주려는 방식의 기능을 삭제해 주고
onkeypress인 것을 onkeyup으로 바꾼 후 작성한 값을 keyword에 넣어주는 방식을 바꿔 준다
backspace function
위와 같이 변경되면 한글을 입력해도 자동완성이 뜨고 지운다면 완성창이 사라지게 된다
그러나 press처럼 누르고 있을 시 자동완성이 뜨지 않는 부분은 onkeyup 이전에 onkeydown을 onkeyup으로 넣어주는 방식이다
*Source Code 자동완성
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
|
<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 ="";
searchKeyword.onkeydown = function(e) {
searchKeyword.onkeyup(e);
};
// $("#searchKeyword").keyup(function() {...}); 와 동일
searchKeyword.onkeyup = function( e ){
if( e.char ) {
//IE 전용
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;
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.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 |
'[ Developer ] > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 자료형 종류 (0) | 2016.09.28 |
|---|---|
| [JavaScript] 자바스크립트란? 자바스크립트 기초 (0) | 2016.09.27 |
| [JavaScript] 자바스크립트란? 자바스크립트 팝업 Pop up (0) | 2016.06.01 |
| [jQuery] 제이쿼리를 이용한 유효성 검사 (1) | 2016.05.25 |
| [jQuery] 제이쿼리란? jQuery 설치 (0) | 2016.05.24 |
