주소검색(API연계) 추가
parent
2857d048c1
commit
c40e0fc638
@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="/resources/image/favicon.ico" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="/resources/font/publicsans/fontface.css" />
|
||||
|
||||
<!-- Icons. Uncomment required icon fonts -->
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/fonts/flag-icons.css" />
|
||||
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-icon.css" />
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-core.css" />
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/css/theme-default.css" />
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/css/docs.css" />
|
||||
<link rel="stylesheet" href="/resources/css/fims/framework/common/xit-core-extend.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/resources/css/styles.css" />
|
||||
|
||||
<link rel="stylesheet" href="/resources/css/fims/framework/common/common.css"/>
|
||||
<link rel="stylesheet" href="/resources/lib/fims/framework/jquery-ui/1.13.2/themes/redmond/jquery-ui.css" />
|
||||
<link rel="stylesheet" href="/resources/lib/fims/framework/datepicker/datepicker.css" />
|
||||
|
||||
|
||||
<title>주소검색</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card m-4 p-3">
|
||||
<form name="form" id="form" method="post">
|
||||
<input type="hidden" name="resultType" value="json" /> <!-- 요청 변수 설정 (검색결과형식 설정, json) -->
|
||||
<input type="hidden" name="confmKey" value="U01TX0FVVEgyMDE3MDQwMzIwMzUzMjIwMzI2" /><!-- 요청 변수 설정 (승인키) -->
|
||||
<input type="hidden" name="countPerPage" value="10"/><!-- 요청 변수 설정 (페이지당 출력 개수. countPerPage 범위 : 0 < n <= 100) -->
|
||||
<input type="hidden" id="currentPage" name="currentPage" value="1"/> <!-- 요청 변수 설정 (현재 페이지. currentPage : n > 0) -->
|
||||
|
||||
<div class="container-search">
|
||||
<div class="row g-1">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<input type="text" id="dummy" value="" hidden />
|
||||
<input type="text" name="keyword" class="form-control w-px-400"
|
||||
placeholder="예) 도움6로 42, 국립중앙박물관, 상암동 1595, 초성검색"
|
||||
value="" onkeydown="enterSearch();"/><!-- 요청 변수 설정 (키워드) -->
|
||||
<button type="button" class="btn btn-search ms-2" onClick="getAddr(1);">검색</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="list" class="mt-4">
|
||||
<div class="card-datatable text-nowrap">
|
||||
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||
<div class="table-responsive" style="height:400px;overflow-x: scroll;overflow-y: scroll;">
|
||||
<table id="DataTables_Table_0" class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 650px;">주소</th>
|
||||
<th style="width: 100px;">우편번호</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="addrTbody">
|
||||
</tbody>
|
||||
<template id="addrRow">
|
||||
<tr data-key="{TEMP_ID}">
|
||||
<td onclick="{onclick}" class="text-start">
|
||||
<strong class="fs-4">{roadAddr}</strong><br/>{jibunAddr}
|
||||
</td>
|
||||
<td onclick="{onclick}" class="text-center">{zipNo}</td>
|
||||
<td class="dummy-td"></td>
|
||||
</tr>
|
||||
</template>
|
||||
<template id="addrNotFound">
|
||||
<tr>
|
||||
<td valign="top" colspan="3" class="dataTables_empty text-center">조회 결과가 없습니다.</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- 검색 결과 리스트 출력 영역 -->
|
||||
|
||||
<div>
|
||||
<span class="container-page-btn">
|
||||
<div class="d-flex flex-row justify-content-between">
|
||||
<label id="addrPagingPagingInfo" class="dataTables_info" role="status" aria-live="polite">
|
||||
</label>
|
||||
<ul id="addrPaging" class="pagination pagination-primary">
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="formBottom" style="display:none">
|
||||
<div>
|
||||
기본주소 :
|
||||
<span id="mainAddr"></span>
|
||||
<br/>
|
||||
상세주소 :
|
||||
<input type="text" id="etcAddr" name="etcAddr" class="form-control w-px-400" />
|
||||
<button type="button" class="btn btn-primary" onClick="fnReturn();">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/JavaScript" src="/resources/3rd-party/sneat/libs/jquery/jquery.js" ></script>
|
||||
|
||||
<script src="/resources/3rd-party/sneat/libs/popper/popper.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/js/bootstrap.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/libs/hammer/hammer.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/libs/i18n/i18n.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/js/menu.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/libs/jstree/jstree.js"></script>
|
||||
<script src="/resources/3rd-party/jstree/jstree-support.js"></script>
|
||||
<script src="/resources/3rd-party/sneat/libs/chartjs/chartjs.js"></script>
|
||||
|
||||
|
||||
<script src="/resources/lib/fims/framework/jquery-ui/1.13.2/jquery-ui.js"></script>
|
||||
|
||||
<script src="/resources/js/base/base.js"></script>
|
||||
<script src="/resources/js/base/base-fims.js"></script>
|
||||
<script src="/resources/js/base/dataset.js"></script>
|
||||
|
||||
<script language="javascript">
|
||||
var callbackFuncName = location.search.split("=")[1];
|
||||
|
||||
/**************************************************************************
|
||||
* DatasetControl
|
||||
**************************************************************************/
|
||||
var addrControl = new DatasetControl({
|
||||
urls : { load : "", getInfo : "" },
|
||||
dataGetter : obj => obj.juso, appendData:false,
|
||||
keymapper : info => info ? info.TEMP_ID : "",
|
||||
formats: {}
|
||||
});
|
||||
/**************************************************************************
|
||||
* DatasetControl.on
|
||||
**************************************************************************/
|
||||
addrControl.onDatasetChange = (obj) => {
|
||||
|
||||
renderAddrList(obj.common.totalCount);
|
||||
|
||||
$("#addrPaging").setPaging({
|
||||
list: addrControl.dataset,
|
||||
prefix: "addrPaging",
|
||||
start: (((obj.common.currentPage - 1) * obj.common.countPerPage) + 1),
|
||||
totalSize: obj.common.totalCount,
|
||||
fetchSize: obj.common.countPerPage,
|
||||
func: "getAddr({index})"
|
||||
});
|
||||
}
|
||||
|
||||
function renderAddrList(total){
|
||||
|
||||
var addrList = addrControl.dataset;
|
||||
var empty = addrList.empty;
|
||||
var notFound = [document.getElementById("addrNotFound").innerHTML];
|
||||
var found = document.getElementById("addrRow").innerHTML;
|
||||
var replacer = (str, dataItem) => str
|
||||
.replace(/{onclick}/gi, "fnClickAddrList('" + dataItem.getValue("TEMP_ID") + "');")
|
||||
var trs = empty ? notFound : addrList.inStrings(found, replacer);
|
||||
$("#addrTbody").html(trs.join());
|
||||
|
||||
}
|
||||
|
||||
function getAddr(pageNum){
|
||||
// 적용예 (api 호출 전에 검색어 체크)
|
||||
if (!checkSearchedWord(document.form.keyword)) {
|
||||
return ;
|
||||
}
|
||||
|
||||
$("#currentPage").val(pageNum);
|
||||
|
||||
$.ajax({
|
||||
url :"https://business.juso.go.kr/addrlink/addrLinkApiJsonp.do" //인터넷망
|
||||
,type:"post"
|
||||
,data:$("#form").serialize()
|
||||
,dataType:"jsonp"
|
||||
,crossDomain:true
|
||||
,success:function(jsonStr){
|
||||
$("#list").show();
|
||||
$("#formBottom").hide();
|
||||
|
||||
var errCode = jsonStr.results.common.errorCode;
|
||||
var errDesc = jsonStr.results.common.errorMessage;
|
||||
if(errCode != "0"){
|
||||
alert(errCode+"="+errDesc);
|
||||
}else{
|
||||
if(jsonStr != null){
|
||||
var tempId = 0;
|
||||
jsonStr.results.juso.forEach((item) => item.TEMP_ID = tempId++);
|
||||
|
||||
addrControl.setData(jsonStr.results);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
,error: function(xhr,status, error){
|
||||
alert("에러발생");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//특수문자, 특정문자열(sql예약어의 앞뒤공백포함) 제거
|
||||
function checkSearchedWord(obj){
|
||||
if(obj.value.length >0){
|
||||
//특수문자 제거
|
||||
var expText = /[%=><]/ ;
|
||||
if(expText.test(obj.value) == true){
|
||||
alert("특수문자를 입력 할수 없습니다.") ;
|
||||
obj.value = obj.value.split(expText).join("");
|
||||
return false;
|
||||
}
|
||||
|
||||
//특정문자열(sql예약어의 앞뒤공백포함) 제거
|
||||
var sqlArray = new Array(
|
||||
//sql 예약어
|
||||
"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC",
|
||||
"UNION", "FETCH", "DECLARE", "TRUNCATE"
|
||||
);
|
||||
|
||||
var regex;
|
||||
for(var i=0; i<sqlArray.length; i++){
|
||||
regex = new RegExp( sqlArray[i] ,"gi") ;
|
||||
|
||||
if (regex.test(obj.value) ) {
|
||||
alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
|
||||
obj.value =obj.value.replace(regex, "");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true ;
|
||||
}
|
||||
|
||||
function enterSearch() {
|
||||
var evt_code = (window.netscape) ? ev.which : event.keyCode;
|
||||
if (evt_code == 13) {
|
||||
event.keyCode = 0;
|
||||
getAddr(1); //jsonp사용시 enter검색
|
||||
}
|
||||
}
|
||||
|
||||
function fnClickAddrList(tempId){
|
||||
$("#formBottom").show();
|
||||
$("#mainAddr").html("");
|
||||
$("#etcAddr").val("");
|
||||
|
||||
addrControl.dataset.setCurrent(tempId);
|
||||
$("#mainAddr").html(addrControl.dataset.getCurrent().roadAddr);
|
||||
$("#addrTbody").setCurrentRow(tempId);
|
||||
$("#etcAddr").focus();
|
||||
}
|
||||
|
||||
function fnReturn(){
|
||||
|
||||
var addrObj = {};
|
||||
|
||||
addrObj = addrControl.dataset.getCurrent();
|
||||
addrObj.etcAddr = $("#etcAddr").val();
|
||||
|
||||
addrObj.ZIP = addrObj.zipNo;
|
||||
addrObj.ADDR = addrObj.roadAddr;
|
||||
addrObj.DTL_ADDR = addrObj.etcAddr;
|
||||
addrObj.ROAD_NM_CD = addrObj.rnMgtSn;
|
||||
addrObj.UDGD_SE_CD = addrObj.udrtYn;
|
||||
addrObj.BMNO = addrObj.buldMnnm;
|
||||
addrObj.BSNO = addrObj.buldSlno;
|
||||
addrObj.BLDG_MNG_NO = addrObj.bdMgtSn;
|
||||
|
||||
addrObj.STDG_CD = addrObj.admCd;
|
||||
addrObj.MTN_SE_CD = addrObj.mtYn;
|
||||
addrObj.MNO = addrObj.lnbrMnnm;
|
||||
addrObj.SNO = addrObj.lnbrSlno;
|
||||
|
||||
addrObj.DONG_CD = "";
|
||||
|
||||
window.opener[callbackFuncName](addrObj);
|
||||
window.close();
|
||||
}
|
||||
|
||||
|
||||
$("#DataTables_Table_0").find("th").resizable({handles : "e"});
|
||||
$("#list").hide();
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue