[ HTML ] 검색이 가능한 select만들기 datalist

 

값을 선택하도록 만들때 select만 사용했었는데,

select의 일을 하면서 검색도 가능한 HTML 태그 datalist가 있어서 정리하려고 한다.

두개의 비교와 기능은 아래에 간단히 정리해서 적어두었다 : )

 

 

select 

설정 해 놓은 option의 value값을 선택 할 수 있다.

(선택만 가능하고 검색은 불가능)

js로 검색이 가능하도록 filter등으로 적용 시켜줘야했었다

<div>
  <label for="numbers">number</label>
  <select id="numbers">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
  </select>
</div>

datalist 

설정 해 놓은 option의 value값을 선택 할 수 있다.

선택도 가능하고 검색도 가능하다

<div>
  <label for="numbers">numbers</label>
  <input type="text" list="list" id="numbers"/>
  <datalist id ="list">
    <option value="1" />
    <option value="2" />
    <option value="3" />
    <option value="4" />
    <option value="5" />
    <option value="6" />
  </datalist>
</div>

 

 

 

 

---

✔︎ 참고 www.youtube.com/watch?v=iX_QyjdctsQ&ab_channel=WebDevSimplified