(4)편에서 만든 웹페이지를 업그레이드하는 방향을 두 개 생각해봤다.
1. 구글맵에 복수 개의 마커 추가하기
2. 검색창에 자동완성기능 넣기
멘토링에서 1보다는 2를 추천해주셔서 시도해봤다.
내가 원하는 결과물은, 국토부 open API로 제공받은 세계공항코드 JSON 파일을
HTML 내에 import 해와서 이것을 raw data로 이용, 자동완성 기능을 완성하는 것이었다
그런데 JSON 파일을 HTML 내에 import 해오는 것부터 막혀서...
하루쯤 해보고 각이 안나와서 과정을 좀 수정했다!
1. list 형태로 자동완성기능을 만들어보기
2. 자동완성기능에 참조되는 list에 JSON 파일을 import 해보기
일단 1을 성공해서 올려본다...
검색어는 "make autocomplete in javascript" 이런 식으로 검색을 많이 했고
JQuery에 autocomplete 기능이 있는 것 같아 시도를 해봤는데 잘 먹히지가 않아서...
JQuery 사용하는 것은 깔끔하게 포기하고 ^^ 아래 링크에 들어있는 코드를 그대-로 복사 붙여넣기를 했다.
https://www.w3schools.com/howto/howto_js_autocomplete.asp
How To Create Autocomplete on an Input Field
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
근데 처음 복붙 했을 때 바로 먹히지가 않았는데,
내가 원래 썼던 html 문의 골격 구조가 아래와 같이 되어 있었다.
<head>
</head>
<style>
</style>
<script>
</script>
<body>
</body>
위 코드를 그대로 복사-붙여넣기하여 기존에 있떤 구조의 style과 script, body에 넣었는데 작동이 안되는 것...
근데 위 링크를 보니 body 다음에 autocomplete를 위한 script가 있는게 아니겠는가?
그래서 내 html문의 body 밑에 script를 구조를 하나 더 만들고 그 아래에 코드를 붙여넣어봤다
그랬더니 작동이 됨,,,!!!!! (?????)
지금 List 안에 있는 요소들이 나라 이름이라서 저렇다... 이제 JSON 파일 가져와서 List 바꾸는 작업을 할 것이다.
사실 내가 직접 코드를 짠 것도 아니고 복붙했는데 된거라 어리둥절하기도 하고 원리도 정확하게는 모르겠지만......
어쨌든..... 얼레벌레하게 성공.....
'Development > Web development' 카테고리의 다른 글
| 웹개발 프로젝트 : (6) 웹페이지 2차 업그레이드 (0) | 2022.03.10 |
|---|---|
| 웹개발 프로젝트 : (4) 웹페이지 1차 완성 (0) | 2022.02.23 |
| 웹개발 프로젝트 : (3) 지도 위치 바꾸기 (0) | 2022.02.22 |
| 웹개발 프로젝트 : (2) 지도 넣기 (0) | 2022.02.21 |
| 웹개발 프로젝트 : (1) 기획안 (0) | 2022.02.14 |