可搜尋選項列表 (Datalist)

  • 新提案
  • 封閉測試
  • 公開測試
  • 已穩定
成熟度說明
  • 新提案:未完成開發、請勿使用。
  • 封閉測試:開發暫時性完成,可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試:開發暫時性完成,歡迎使用。具有完整親和力報告。
  • 已穩定:開發完成、歡迎使用。應無任何親和力或使用上問題。

說明

  • 可搜尋選項列表(Datalist)必須與 <input> 搭配在一起使用,在 <input> 中要設定 list 屬性並對應到 <datalist>id 屬性。
  • 提供可搜尋功能,讓使用者在選項很多的時候,可以快速找到目標選項,如:國家列表;對於開發者來說,不需要寫額外的 JavaScript 就能有可搜尋功能。
  • 可搜尋選項列表(Datalist)在瀏覽列表項目(<option>)的使用者體驗在手機裝置上,可能較不適用在使用者沒有明確的目標選項(需要瀏覽一下選項才能選擇)的狀況,如:餐點列表。

基本樣式

HTML
<form id="data-form" action="" method="get">
    <label for="country">選擇國家:</label>

    <input list="country-list" id="country" name="country" size="50" autocomplete="off" />

    <datalist id="country-list">
        <option value="AD">安道爾</option>
        <option value="AE">阿拉伯聯合大公國</option>
        <option value="AF">阿富汗</option>
        <option value="AG">安地卡及巴布達</option>
        <option value="AI">安圭拉</option>
        <option value="AL">阿爾巴尼亞</option>
        <option value="AM">亞美尼亞</option>
        <option value="AO">安哥拉</option>
        <option value="AQ">南極洲</option>
        <option value="AR">阿根廷</option>
        <option value="AS">美屬薩摩亞</option>
        <option value="AT">奧地利</option>
        <option value="AU">澳大利亞</option>
        <option value="AW">阿魯巴</option>
        <option value="AX">奧蘭</option>
        <option value="AZ">亞塞拜然</option>
        <option value="BA">波士尼亞與赫塞哥維納</option>
        <option value="BB">巴貝多</option>
        <option value="BD">孟加拉</option>
        <option value="BE">比利時</option>
        <option value="BF">布吉納法索</option>
        <option value="BG">保加利亞</option>
        <option value="BH">巴林</option>
        <option value="BI">蒲隆地</option>
        <option value="BJ">貝南</option>
        <option value="BL">聖巴瑟米</option>
        <option value="BM">百慕達</option>
        <option value="BN">汶萊</option>
        <option value="BO">玻利維亞</option>
        <option value="BQ">荷蘭加勒比區</option>
        <option value="BR">巴西</option>
        <option value="BS">巴哈馬</option>
        <option value="BT">不丹</option>
        <option value="BV">布韋島</option>
        <option value="BW">波札那</option>
        <option value="BY">白俄羅斯</option>
        <option value="BZ">貝里斯</option>
        <option value="CA">加拿大</option>
        <option value="CC">可可斯群島</option>
        <option value="CD">剛果民主共和國</option>
        <option value="CF">中非共和國</option>
        <option value="CG">剛果共和國</option>
        <option value="CH">瑞士</option>
        <option value="CI">象牙海岸</option>
        <option value="CK">庫克群島</option>
        <option value="CL">智利</option>
        <option value="CM">喀麥隆</option>
        <option value="CN">中國</option>
        <option value="CO">哥倫比亞</option>
        <option value="CR">哥斯大黎加</option>
        <option value="CU">古巴</option>
        <option value="CV">維德角</option>
        <option value="CW">古拉索</option>
        <option value="CX">聖誕島</option>
        <option value="CY">賽普勒斯</option>
        <option value="CZ">捷克</option>
        <option value="DE">德國</option>
        <option value="DJ">吉布地</option>
        <option value="DK">丹麥</option>
        <option value="DM">多米尼克</option>
        <option value="DO">多明尼加</option>
        <option value="DZ">阿爾及利亞</option>
        <option value="EC">厄瓜多</option>
        <option value="EE">愛沙尼亞</option>
        <option value="EG">埃及</option>
        <option value="EH">西撒哈拉</option>
        <option value="ER">厄利垂亞</option>
        <option value="ES">西班牙</option>
        <option value="ET">衣索比亞</option>
        <option value="FI">芬蘭</option>
        <option value="FJ">斐濟</option>
        <option value="FK">福克蘭群島</option>
        <option value="FM">密克羅尼西亞聯邦</option>
        <option value="FO">法羅群島</option>
        <option value="FR">法國</option>
        <option value="GA">加彭</option>
        <option value="GB">英國</option>
        <option value="GD">格瑞那達</option>
        <option value="GE">喬治亞</option>
        <option value="GF">法屬圭亞那</option>
        <option value="GG">根西</option>
        <option value="GH">迦納</option>
        <option value="GI">直布羅陀</option>
        <option value="GL">格陵蘭</option>
        <option value="GM">甘比亞</option>
        <option value="GN">幾內亞</option>
        <option value="GP">瓜地洛普</option>
        <option value="GQ">赤道幾內亞</option>
        <option value="GR">希臘</option>
        <option value="GS">南喬治亞與南三明治群島</option>
        <option value="GT">瓜地馬拉</option>
        <option value="GU">關島</option>
        <option value="GW">幾內亞比索</option>
        <option value="GY">蓋亞那</option>
        <option value="HK">香港</option>
        <option value="HM">赫德島與麥當勞群島</option>
        <option value="HN">宏都拉斯</option>
        <option value="HR">克羅埃西亞</option>
        <option value="HT">海地</option>
        <option value="HU">匈牙利</option>
        <option value="ID">印尼</option>
        <option value="IE">愛爾蘭</option>
        <option value="IL">以色列</option>
        <option value="IM">英屬曼島</option>
        <option value="IN">印度</option>
        <option value="IO">英屬印度洋領地</option>
        <option value="IQ">伊拉克</option>
        <option value="IR">伊朗</option>
        <option value="IS">冰島</option>
        <option value="IT">義大利</option>
        <option value="JE">澤西</option>
        <option value="JM">牙買加</option>
        <option value="JO">約旦</option>
        <option value="JP">日本</option>
        <option value="KE">肯亞</option>
        <option value="KG">吉爾吉斯</option>
        <option value="KH">柬埔寨</option>
        <option value="KI">吉里巴斯</option>
        <option value="KM">葛摩</option>
        <option value="KN">聖克里斯多福</option>
        <option value="KP">北韓</option>
        <option value="KR">南韓</option>
        <option value="KW">科威特</option>
        <option value="KY">開曼群島</option>
        <option value="KZ">哈薩克</option>
        <option value="LA">寮國</option>
        <option value="LB">黎巴嫩</option>
        <option value="LC">聖露西亞</option>
        <option value="LI">列支敦斯登</option>
        <option value="LK">斯里蘭卡</option>
        <option value="LR">賴比瑞亞</option>
        <option value="LS">賴索托</option>
        <option value="LT">立陶宛</option>
        <option value="LU">盧森堡</option>
        <option value="LV">拉脫維亞</option>
        <option value="LY">利比亞</option>
        <option value="MA">摩洛哥</option>
        <option value="MC">摩納哥</option>
        <option value="MD">摩爾多瓦</option>
        <option value="ME">蒙特內哥羅</option>
        <option value="MF">法屬聖馬丁</option>
        <option value="MG">馬達加斯加</option>
        <option value="MH">馬紹爾群島</option>
        <option value="MK">北馬其頓</option>
        <option value="ML">馬利</option>
        <option value="MM">緬甸</option>
        <option value="MN">蒙古</option>
        <option value="MO">澳門</option>
        <option value="MP">北里亞納群島</option>
        <option value="MQ">馬丁尼克</option>
        <option value="MR">茅利塔尼亞</option>
        <option value="MS">蒙哲臘</option>
        <option value="MT">馬爾他</option>
        <option value="MU">模里西斯</option>
        <option value="MV">馬爾地夫</option>
        <option value="MW">馬拉威</option>
        <option value="MX">墨西哥</option>
        <option value="MY">馬來西亞</option>
        <option value="MZ">莫三比克</option>
        <option value="NA">納米比亞</option>
        <option value="NC">新喀里多尼亞</option>
        <option value="NE">尼日</option>
        <option value="NF">諾福克島</option>
        <option value="NG">奈及利亞</option>
        <option value="NI">尼加拉瓜</option>
        <option value="NL">荷蘭</option>
        <option value="NO">挪威</option>
        <option value="NP">尼伯爾</option>
        <option value="NR">諾魯</option>
        <option value="NU">紐威島</option>
        <option value="NZ">紐西蘭</option>
        <option value="OM">阿曼</option>
        <option value="PA">巴拿馬</option>
        <option value="PE">秘魯</option>
        <option value="PF">法屬玻里尼西亞</option>
        <option value="PG">巴布亞紐幾內亞獨立國</option>
        <option value="PH">菲律賓</option>
        <option value="PK">巴基斯坦</option>
        <option value="PL">波蘭</option>
        <option value="PM">聖皮埃與密克隆群島</option>
        <option value="PN">皮特肯群島</option>
        <option value="PR">波多黎各</option>
        <option value="PS">巴勒斯坦</option>
        <option value="PT">葡萄牙</option>
        <option value="PW">帛琉</option>
        <option value="PY">巴拉圭</option>
        <option value="QA">卡達</option>
        <option value="RE">留尼旺</option>
        <option value="RO">羅馬尼亞</option>
        <option value="RS">塞爾維亞</option>
        <option value="RU">俄羅斯</option>
        <option value="RW">盧安達</option>
        <option value="SA">沙烏地阿拉伯</option>
        <option value="SB">索羅門群島</option>
        <option value="SC">塞席爾</option>
        <option value="SD">蘇丹</option>
        <option value="SE">瑞典</option>
        <option value="SG">新加坡</option>
        <option value="SH">聖赫勒拿島</option>
        <option value="SI">斯洛維尼亞</option>
        <option value="SJ">斯瓦爾巴和揚馬延</option>
        <option value="SK">斯洛伐克</option>
        <option value="SL">獅子山</option>
        <option value="SM">聖馬利諾</option>
        <option value="SN">塞內加爾</option>
        <option value="SO">索馬利亞</option>
        <option value="SR">蘇利南</option>
        <option value="SS">南蘇丹</option>
        <option value="ST">聖多美普林西比</option>
        <option value="SV">薩爾瓦多</option>
        <option value="SY">敘利亞</option>
        <option value="SZ">史瓦帝尼</option>
        <option value="TC">特克斯與凱科斯群島</option>
        <option value="TD">查德</option>
        <option value="TF">法屬南部和南極領地</option>
        <option value="TG">多哥</option>
        <option value="TH">泰國</option>
        <option value="TJ">塔吉克</option>
        <option value="TK">托克勞</option>
        <option value="TL">東帝汶</option>
        <option value="TM">土庫曼</option>
        <option value="TN">突尼西亞</option>
        <option value="TO">東加</option>
        <option value="TR">土耳其</option>
        <option value="TT">千里達及托巴哥</option>
        <option value="TV">吐瓦魯</option>
        <option value="TW">臺灣</option>
        <option value="TZ">坦尚尼亞</option>
        <option value="UA">烏克蘭</option>
        <option value="UG">烏干達</option>
        <option value="UM">美國本土外小島嶼</option>
        <option value="US">美國</option>
        <option value="UY">烏拉圭</option>
        <option value="UZ">烏玆別克</option>
        <option value="VA">梵蒂岡</option>
        <option value="VC">聖文森及格瑞那丁</option>
        <option value="VE">委內瑞拉</option>
        <option value="VG">英屬維京群島</option>
        <option value="VI">美屬維京群島</option>
        <option value="VN">越南</option>
        <option value="VU">萬那杜</option>
        <option value="WF">瓦利斯和富圖那</option>
        <option value="WS">薩摩亞</option>
        <option value="YE">葉門</option>
        <option value="YT">馬約特</option>
        <option value="ZA">南非</option>
        <option value="ZM">尚比亞</option>
        <option value="ZW">辛巴威</option>
    </datalist>

    <button class="button" type="submit">送出</button>
</form>
  • 可以分別試試輸入「tw」、「臺灣」看看