• 목록

<datalist> 태그는 사용자의 입력을 돕기 위해,
콤보박스 형태로 사용자가 추천할 수 있는 선택지를 제공하고,
자동완성 기능을 제공합니다.

1. <datalist> 태그 알아보기[code]<input list="fruitslist" name="fruits" id="fruits">
<datalist id="fruitslist">
  <option value="apple">
  <option value="banana">
  <option value="grape">
  <option value="orange">
</datalist>[/code]<datalist> 태그는 위 예제에서 보는 것처럼
<input> 태그에 연결되어
사용자가 값을 쉽게 입력 할 수 있도록 추천 목록을 제공하고,
사용자가 추천목록 안의 값을 타이핑 할 경우 자동완성 되는 기능을 제공합니다.
datalist가 제공하는 추천목록 이외의 값을 입력할 수도 있습니다.
콤보박스와 텍스트 입력 창을 합쳐 놓은 것과 비슷합니다.

주의할 점은
<input>의 list에 정의된 값과 <datalist>의 id 값이 같아야 한다는 것입니다.
이 두 속성이 두 태그를 연결해주는 역할을 합니다.

2. <datalist>에 value와 label 추가하기[code]<input list="fruitslist" name="fruits" id="fruits">
<datalist id="fruitslist">
  <option value="apple" label="사과">
  <option value="banana" label="바나나">
  <option value="grape" label="포도">
  <option value="orange" label="오렌지">
</datalist>[/code]option에서 value 값은 <form>에서 submit 될때 전달되는 값입니다.
option에서 label은 사용자에게 보여주는 값입니다.
이렇게 label과 value를 같이 적용했을 때, 브라우저마다 보여주는 방법이 조금씩 다릅니다.
크롬 브라우저에서는 value와 label값을 모두 보여주네요!

3. <datalist> default 값 지정하기[code]<input list="fruitslist" name="fruits" id="fruits" value='orange'>
<datalist id="fruitslist">
  <option value="apple" label="사과">
  <option value="banana" label="바나나">
  <option value="grape" label="포도">
  <option value="orange" label="오렌지">
</datalist>[/code]default 값을 지정하기 위해서는
<input> 태그에 datalist의 option value중 하나를 value로 설정해줍니다.
여기서는 'orange'를 default 값으로 설정하였습니다.

4. <datalist>의 option 전체 목록 가져오기[code]<!-- datalist -->
<input list="fruitslist" name="fruits" id="fruits" value='orange'>
<datalist id="fruitslist">
  <option value="apple" label="사과">
  <option value="banana" label="바나나">
  <option value="grape" label="포도">
  <option value="orange" label="오렌지">
</datalist>

<!-- 버튼 -->
<input
      type='button'
      value='option 목록 가져오기'
      onclick='getOptionList()'/>

<!-- option 목록 출력 -->
<div id='valuelist'></div>
<div id='labellist'></div>
<script>
function getOptionList()  {
  // datalist의 option 목록 가져오기
  const options = document.getElementById('fruitslist').options;
 
  // 각각의 option에서 value, label 가져오기
  const optionsValue = [];
  const optionsLabel = [];
  for(let i = 0; i < options.length; i++) {
    const option = options[i];
    optionsValue.push(option.value);
    optionsLabel.push(option.label);
  }
 
  // datalist 목록 출력
  document.getElementById('valuelist').innerText = optionsValue;
  document.getElementById('labellist').innerText = optionsLabel;
}
</script>[/code]위 예제는 'option 목록 가져오기' 버튼을 클릭하면,
datalist의 option 목록의 value와 label을 가져와서 출력하는 예제입니다.

<JS>
document.getElementById('fruitslist').options;
datalist의 option 목록을 가져옵니다.

for(...)
options 목록을 반복문으로 순회하면서
각각 option element의 value와 label 값을 가져옵니다.