김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
min1925k@gmail.com
07998799 1 parent 5115d43d

LPG AutoComplete List

Inline Side-by-side
Showing 2 changed files with 50 additions and 4 deletions
......@@ -63,7 +63,7 @@ app.use(ExpressSession({
//모든 router 처리가 끝난 후 404 오류 페이지 처리
var errorHandler = expressErrorHandler({
static: {
'404': './rest_stop_list/app/public/404.html'
'404': './app/public/404.html'
}
});
app.use(expressErrorHandler.httpError(404));
......
......@@ -12,7 +12,54 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<script>
var LPG_Reststop_List2 = [];
fetch('http://data.ex.co.kr/openapi/business/lpgServiceAreaInfo?key=6806352377&type=json&numOfRows=1000').then(function (response) {
method: 'GET';
body: JSON.stringify(this.obj)
response.text().then(function (text) {
//쓸데없는 데이터를 제거하여 필요한 데이터만 정리하기
index_1 = text.indexOf('[')
index_2 = text.indexOf(']')
mdata = text.substr(index_1 + 1, index_2 - index_1 - 1)
//text data -> array data
// },를 기준으로 하여 split으로 각 데이터셋 {}이 array의 원소가 되도록 array를 생성하기
mmdata = mdata.split('},');
//휴게소 이름들만 데이터리스트에서 추출해 LPG_Reststop_List 어레이에 넣기
//mmdata의 길이만큼 반복
for(let i=0; i<mmdata.length; i++){
//휴게소 이름만 데이터리스트에서 추출하기
index_3 = mmdata[i].indexOf('"serviceAreaName":"')
index_4 = mmdata[i].indexOf(',"routeCode":"')
ReststopName = mmdata[i].substr(index_3+19, index_4-index_3-20)
//휴게소 이름을 어레이에 추가
LPG_Reststop_List2.push(ReststopName)}
})
})
$(function() {
var repo_list = ["용인휴게소","서울휴게소","여주휴게소",];
    $("#name").autocomplete({
        source: LPG_Reststop_List2,
        select: function(event, ui) {
            console.log(ui.item);
        },
        focus: function(event, ui) {
            return false;
            //event.preventDefault();
        }
    });});
</script>
<body class="d-flex flex-column">
<main class="flex-shrink-0">
......@@ -58,7 +105,6 @@
<!--검색 버튼으로 검색할 휴게소 이름 입력 받기-->
<p><input type="text" placeholder="휴게소 이름" id="name"><input type="button" onclick="ShowLPG()" value="확인"></p>
</div>
</div>
</div>
......@@ -82,15 +128,15 @@
</section>
<script>
//LPG 휴게소 open api는 LPG휴게소가 존재하는 데이터 리스트만 가지고 있음
//따라서 fetch를 총 두 번 진행하여 첫번째에서는 LPG 휴게소 리스트를 받아와 그 중 휴게소 이름만 추출하여 리스트로 만들고
//웹 페이지에서 검색하고자 하는 휴게소 이름을 입력받아 만약 이름이 LPG휴게소 리스트에 있다면
//'LPG 충전소가 있습니다'를, 없다면 'LPG 충전소가 없습니다'를 출력하도록 함
//fetch로 전체 데이터 리스트를 text형태로 끌어오기
function ShowLPG() {
......