Chrome Canary에 추가된 데이터 목록

Eiji Kitamura

양식을 작성하는 것이 번거롭게 느껴질 때가 있습니다. 사용자에게 객관식 선택권을 제공하면서 자유롭게 입력할 수 있도록 하는 것이 중요합니다. 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은(는) 버전 10 이후의 최신 Firefox, Opera, Internet Explorer에서 널리 사용됩니다. 그러므로 호환성에 대해 너무 걱정할 필요는 없지만, 모든 브라우저에서 작동하도록 하려면 다음을 시도해 보세요.

<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'을 모두 쿼리 매개변수로 포착해야 합니다.