LPG AutoComplete List

min1925k@gmail.com
Commit 0799879951e900a7720e295420ac9895d8b90cf3 07998799 1 parent 5115d43d
Showing 2 changed files with 50 additions and 4 deletions
app/app.js
app/views/lpg.html
--- a/app/app.js
View file @0799879
+++ b/app/app.js
View file @0799879
@@ -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));
--- a/app/views/lpg.html
View file @0799879
+++ b/app/views/lpg.html
View file @0799879
@@ -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() {