[HTML,CSS] HMTL <datalist> 태그

<datalist> 태그는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용합니다.

 

옵션들은 자동완성 기능을 제공합니다.

 

jsp 페이지

<input> 태그와

<datalist> 태그는 datalist의 id와 input의 list로 연결시킵니다.

autocomplete='off'는 datalist가 출력될 때 input에 브라우저에서 저장해둔 내용이 뜨는 걸 막습니다.
<datalist> 안에 <option> 태그로 값을 줄 수 있습니다.

<datalist>
	<option>value</option>
</datalist>

저는 DB에 저장되어있는 개발사와 유통사를 자동으로 제시해야 하기 때문에

script 단에서 DB에 있는 값을 option단위로 넣어줬다 

 

DB에 값을 넣어줬다 
입력한 글자에 맞춰서 자동완성이 된다
동일한 글자에 색상을 넣거나 DATALIST 출력 개수 제한 같은 건 찾아봐야 할 거 같다.