아주 쉽게 자동완성 기능 만드는 방법(datalist)

요즘은 무언가를 검색할 때 아래와 같이 자동완성(Autocomplete) 기능이 나오는 것이 너무나도 자연스럽게 되었다. 단어 중 일부만 기억이 날 때도 선택지에 원하는 것을 찾을 수 있어서 유용하고, 완전하게 타이핑하지 않아도 원하는 단어가 표시되어 편리하다. 이제는 없으면 불편한 수준이다. 네이버처럼 '관심사를 반영한 컨텍스트 자동완성' 같은 기능은 훨씬 고도화된 기술이 필요하겠지만, 내가 검색하려는 단어가 포함된 수준이라면 아주 쉽게 자동완성 기능을 만들 수 있다. 원래는 자바스크립트를 통해 매우 복잡한 로직을 거쳐 만들어야 하지만, HTML에서 단어를 입력할 수 있는 'input' 태그와, 'datalist'라는 태그만 있으면 기능을 구현할 수 있다. 대신 아주 간단한 조건이 있는데, input 태그 안에 있는 'list'와, datalist 태그 안에 있는 'id'가 서로 같아야 한다는 점이다. 아래 예시도 datalistOptions라는 값으로 동일하다. <input cl...