input 태그와 option태그를 함께 사용하기

1. 문제상황

인풋에 입력도 가능하고 옵션태그를 이용해 선택도 가능하게 만들고 싶었지만
기존의 옵션태그를 사용하면 입력은 불가능한 상황 발생

 

 

2. 문제해결

datalist 태그를 활용함!!

//**dataList 태그의 id === input 어트리뷰트의 list

<datalist id="list">
	<option value="kakao">kakao</option>
</datalist>

<input
	list = "list"
/>