[Javascript] 사용자 입력을 도와주는 datalist 알아보기

 

 

<datalist> 태그는 사용자의 입력을 돕기 위해,

콤보박스 형태로 사용자가 추천할 수 있는 선택지를 제공하고,

자동완성 기능을 제공합니다.

 

1. <datalist> 태그 알아보기
2. <datalist>에 value와 label 추가하기
3. <datalist> default 값 지정하기
4. <datalist>의 option 전체 목록 가져오기

 

 

1. <datalist> 태그 알아보기

<input list="fruitslist" name="fruits" id="fruits">
<datalist id="fruitslist">
  <option value="apple">
  <option value="banana">
  <option value="grape">
  <option value="orange">
</datalist>

 

 

 

 

<datalist> 태그는 위 예제에서 보는 것처럼

<input> 태그에 연결되어

사용자가 값을 쉽게 입력 할 수 있도록 추천 목록을 제공하고,

사용자가 추천목록 안의 값을 타이핑 할 경우 자동완성 되는 기능을 제공합니다.

datalist가 제공하는 추천목록 이외의 값을 입력할 수도 있습니다.

콤보박스와 텍스트 입력 창을 합쳐 놓은 것과 비슷합니다.

 

주의할 점은

<input>의 list에 정의된 값과 <datalist>의 id 값이 같아야 한다는 것입니다.

이 두 속성이 두 태그를 연결해주는 역할을 합니다.

 

 

2. <datalist>에 value와 label 추가하기

<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>

option에서 value 값은 <form>에서 submit 될때 전달되는 값입니다.

option에서 label은 사용자에게 보여주는 값입니다.

이렇게 label과 value를 같이 적용했을 때, 브라우저마다 보여주는 방법이 조금씩 다릅니다.

크롬 브라우저에서는 value와 label값을 모두 보여주네요!

 

 

3. <datalist> default 값 지정하기

<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>

default 값을 지정하기 위해서는

<input> 태그에 datalist의 option value중 하나를 value로 설정해줍니다.

여기서는 'orange'를 default 값으로 설정하였습니다.

 

 

4. <datalist>의 option 전체 목록 가져오기

<!-- 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>

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;
}

(JS, HTML 탭을 클릭해서 모든 소스를 확인하세요.)

 

위 예제는 'option 목록 가져오기' 버튼을 클릭하면,

datalist의 option 목록의 value와 label을 가져와서 출력하는 예제입니다.

 

 <JS> 

document.getElementById('fruitslist').options;

datalist의 option 목록을 가져옵니다.

 

for(...)

options 목록을 반복문으로 순회하면서

각각 option element의 value와 label 값을 가져옵니다.

 

 

 

---

 

datalist를 사용하는 방법을 알아보았습니다.