[Javascript] 입력 검색어 제안 - datalist

[정의]

<datalist> 태그는 사용자 입력란에 드롭다운 형식으로 검색어를 리스트로 보여주는 기능

 

[주의사항]

<input>의 list 이름과 <datalist>의 id 이름이 같아야 함

 

[예제활용]

아래의 input form을 클릭해보세요.

<input list="listName" name="searchWord" id="searchWord">
<datalist id="listName">
  <option value="이렇게">
  <option value="검색어를">
  <option value="리스트로">
  <option value="보여줍니다.">
</datalist>

 

아래와 같이 label을 추가하면 보여지는 값과 전송되는 값을 다르게 할 수 있음

 <option value="searchWord1" label="이렇게">