반응형
안녕하세요. 글쓰는 개발자입니다.
오늘은 업무 중에 활용했던,
커리어넷 OPEN API 센터의 학교명 검색 기능을 활용해서
비동기 검색제시어 기능을 구현한 것을 간단하게 소개하려고 합니다.
동기, 비동기 방식에 대한 자세한 설명이 필요할 것 같지만, 다른 포스팅에서 다루도록 하고
기능구현만 간단히 소개하겠습니다.
1. 검색제시어 기능
다양한 포털사이트에서 검색을 하실 경우 아래에 유사한 검색어들이 제시되는 것들을
보셨을 것입니다. 그것이 바로 검색제시어 기능입니다.
비동기 방식이기 때문에 검색어가 변경될 때 마다 매번 새로고침 되지않고
제시어만 계속 바뀌게 됩니다
2. 기능 구현
커리어넷의 OPEN API를 예시로 들었지만, DB에서 불러온 값들을 활용하셔도 됩니다.
1) html
간단하게 검색어를 입력받고 제시어가 나타날 <ul>영역을 만들었습니다.
<input type = "text" id="word" placeholder="검색어를 입력하세요." onkeyup="search(this);"><button type="button" id="btn_search">Search</button>
<ul id="schoolList"></ul> <!-- 검색리스트가 나타나는 영역 -->2) script
입력받은 값을 URI 인코딩을 거쳐, ajax 내부의 url에 삽입한 후 실시간으로 data를 받아와서
append()를 활용해 제시어를 나타냅니다.
(1) onkeyup
input tag에 text가 keyup될 때 마다 search function을 호출하고 입력값을 전달합니다.
(2) encodeURI()
인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다.
<script>
function search(target){
var word = target.value;
var encodeWord = encodeURI(word);
console.log(word);
console.log(encodeWord);
//start Ajax
$.ajax({
type : 'GET',
dataType : 'json',
url : "http://www.career.go.kr/cnet/openapi/getOpenApi?"
+"apiKey=본인의appKey(회원가입 후 승인받아야함)"
+"&svcType=api&svcCode=SCHOOL&contentType=json&gubun=elem_list"
+"&searchSchulNm="+word,
error : function(err) {
console.log("실행중 오류가 발생하였습니다.");
},
success : function(data) {
console.log("data확인 : "+data);
console.log("결과 갯수 : "+data.dataSearch.content.length);
console.log("첫번째 결과 : "+data.dataSearch.content[0]);
$("#schoolList").empty();
var checkWord = $("#word").val(); //검색어 입력값
console.log(data.dataSearch.content.length);
if(checkWord.length > 0 && data.dataSearch.content.length > 0){
for (i = 0; i < data.dataSearch.content.length; i++) {
$("#schoolList")
.append(
"<li class='schoolList' value='"
+ data.dataSearch.content[i].schoolName
+ "' data-input='"
+ data.dataSearch.content[i].schoolName
+ ">"
+ "<a href='javascript:void(0);'>"
+ data.dataSearch.content[i].schoolName
+ "</a>"
+ "</li>");
}
}
}
});//end Ajax
}
</script>
3) 전체코드 및 실행결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type = "text" id="word" placeholder="검색어를 입력하세요." onkeyup="search(this);"><button type="button" id="btn_search">Search</button>
<ul id="schoolList"></ul> <!-- 검색리스트가 나타나는 영역 -->
<script>
function search(target){
var word = target.value;
var encodeWord = encodeURI(word);
console.log(word);
console.log(encodeWord);
//start Ajax
$.ajax({
type : 'GET',
dataType : 'json',
url : "http://www.career.go.kr/cnet/openapi/getOpenApi?"
+"apiKey=본인의appKey(회원가입 후 승인받아야함)="
+"api&svcCode=SCHOOL&contentType=json&gubun=elem_list"
+"&searchSchulNm="+word,
error : function(err) {
console.log("실행중 오류가 발생하였습니다.");
},
success : function(data) {
console.log("data확인 : "+data);
console.log("결과 갯수 : "+data.dataSearch.content.length);
console.log("첫번째 결과 : "+data.dataSearch.content[0]);
$("#schoolList").empty();
var checkWord = $("#word").val(); //검색어 입력값
console.log(data.dataSearch.content.length);
if(checkWord.length > 0 && data.dataSearch.content.length > 0){
for (i = 0; i < data.dataSearch.content.length; i++) {
$("#schoolList")
.append(
"<li class='schoolList' value='"
+ data.dataSearch.content[i].schoolName
+ "' data-input='"
+ data.dataSearch.content[i].schoolName
+ ">"
+ "<a href='javascript:void(0);'>"
+ data.dataSearch.content[i].schoolName
+ "</a>"
+ "</li>");
}
}
}
});//end Ajax
}
</script>
</body>
</html>반응형
'old > Javascript' 카테고리의 다른 글
| [JQuery] .one() 함수, 이벤트 한 번만 적용(사용)하기 (2) | 2020.01.29 |
|---|---|
| [JavaScript] 회원가입, ID, 닉네임 유효성검사(Validation Check) (1) | 2020.01.22 |
| [Javascript] IE10, remove 함수 사용 불가 이슈 (0) | 2020.01.16 |
| [Javascript] '=='과 '===' 차이(동치비교 및 동일성) (0) | 2020.01.12 |
| [Javascript] checkbox 와 검색 필터 / SearchFilter (1) | 2020.01.11 |