HTML로 자동완성 기능 만드는 방법(datalist, django)

 

요즘은 무언가를 검색할 때 아래와 같이 자동완성(Autocomplete) 기능이 나오는 것이 너무나도 자연스럽게 되었다.

단어 중 일부만 기억이 날 때도 선택지에 원하는 것을 찾을 수 있어서 유용하고, 완전하게 타이핑하지 않아도 원하는 단어가 표시되어 편리하다. 이제는 없으면 불편한 수준이다.

네이버처럼 '관심사를 반영한 컨텍스트 자동완성' 같은 기능은 훨씬 고도화된 기술이 필요하겠지만, 내가 검색하려는 단어가 포함된 수준이라면 아주 쉽게 자동완성 기능을 만들 수 있다.

 

 

 

원래는 자바스크립트를 통해 매우 복잡한 로직을 거쳐 만들어야 하지만, HTML에서 단어를 입력할 수 있는 'input' 태그와, 'datalist'라는 태그만 있으면 기능을 구현할 수 있다.

 

대신 아주 간단한 조건이 있는데, input 태그 안에 있는 'list'와, datalist 태그 안에 있는 'id'가 서로 같아야 한다는 점이다. 아래 예시도 datalistOptions라는 값으로 동일하다.

 

아래는 예시 태그를 통해 만들어진 input 폼이니 직접 확인해보아도 좋다.

 

 

<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

 

영어만 되는 거 아니냐고요? 한글도 아주 잘 작동됩니다!!

 

중간에 포함되어 있는 단어들도 잘 찾아서 보여주니 쉽게 구현하지만 아주 강력한 기능이라 생각된다.

 

 

 

혹여나 장고(Django) 자료를 찾다가 오신 분들께도 구현 방법을 알려드리자면,

 

위에서 얘기한 대로 'input'의 'list'와 'datalist'의 'id'가 동일해야 하며, 옵션에 들어가는 항목들이 적으면 상관없지만 많은 경우에 Django ORM(Object-Relational Mapping), 쿼리셋(QuerySets)을 활용하여 모델(models)을 통해 DB 데이터를 가져오고, 뷰(views)에서 템플릿(template)을 연결해 주고,

 

아래와 같이 'for 문'을 통해 항목을 만들어주면 됩니다. 위에 간략하게 얘기한 부분은 시간 될 때마다 글을 작성해 보겠습니다.

 

<input class="form-control me-2" name="search_keyword" type="search" list="stock_name_list" placeholder="종목코드,종목명" aria-label="Search">
  <datalist id="stock_name_list">
    {% for stock_name in stock_name_list %}
      <option>{{stock_name.종목명}}</option>
    {% endfor %}
  </datalist>
  <button class="btn btn-primary" type="submit">Search</button>