자바스크립트로 input의 자동완성을 구현해보도록 하겠습니다. # https://www.w3schools.com/howto/howto_js_autocomplete.asp 를 참고하였습니다. - head 부분 따로, Jquery를 사용하지않고, 자바스크립트만으로 구현을 하였습니다.
- body 부분
- 화면 설명 input에 특정한 값을 입력하면, 그 값에 따라서 자동완성 기능을 수행합니다. - css (autocomplete.css) : autocomplete 기능에 필요한 css
- animal.js : autocomplete를 테스트할 json 값. - autocomplate.js : autocomplete를 수행하는 스크립트 싱글톤으로 작성되었으며 , 아래의 주석은 쭈욱 따라가시면서 파악하시면 좋을 것 같습니다.
- 폴더 구조 : 위에 소스를 아래와 같은 폴더 구조로 만들어서 사용하시면 동일하게 작동할겁니다. - 결과 화면 |