Chrome Canary에 추가된 데이터 목록

양식을 작성하는 것이 번거로울 때가 있습니다. 사용자에게 객관식 답변을 제공하면서 자유롭게 입력할 수 있도록 하는 것이 중요합니다. Chrome Canary(M20)에 방금 출시된 datalist 요소를 사용하면 간편하게 처리할 수 있습니다.

datalist를 사용하면 앱에서 사용자가 선택해야 하는 추천 결과 목록을 정의할 수 있습니다. 목록에서 옵션을 선택하거나 자유 형식 텍스트를 입력할 수 있습니다.

라이브 데모:

input 요소의 list 속성에서 id를 지정하여 옵션을 datalist와 페어링할 수 있습니다.

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist는 최신 Firefox, Opera, Internet Explorer(버전 10 이후)에서 널리 사용할 수 있습니다. 따라서 호환성에 대해 너무 걱정할 필요는 없지만 여러 브라우저에서 작동하는지 확인하려면 다음을 시도해 보세요.

<datalist id="fruits">
    Pick your favorite fruit
    <select name="fruit_sel">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Peach">Peach</option>
    </select>
    or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

브라우저에서 datalist를 사용할 수 있는 경우 option 요소를 제외한 datalist 아래의 모든 항목이 숨겨집니다. 이 대체 메커니즘을 사용하는 경우 서버에서 'fruit_sel'과 'fruit'를 모두 쿼리 매개변수로 포착해야 합니다.