HTML <datalist> 輸入欄位可自動補字之下拉選單

2021/10/08 1,776 1 網站技術 , HTML

<datalist> 是 HTML 原生的標籤,目的是用來建立一組資料清單,並與 <input> 輸入欄位做結合,到瀏覽器端顯示時,使用者只要點擊輸入欄位即會跳出下拉選單,可以在開發者定義好的資料清單中做選擇,且在欄位內輸入與資料清單有關之文字,還能有自動補字或自動完成之效果,舉例來說,在做國家、縣市、地區等輸入時就可以用到。

使用方式

1. 先建立 <input>,並在標籤內塞入 list 屬性並做命名。
2. 下方建立 <datalist>,塞入與前者 list 屬性同名之 id 屬性名稱。
3. 在 <datalist> 至 </datalist> 中塞入 <option>,當中可以用 value 屬性塞入資料值,<option> 至 </option> 中間可以加入補充文字,例如選項之英文翻譯等,這是可選的。

範例原始碼

<label>所在地(Location):</label>
<input list="area" name="MyArea" type="text" />
<datalist id="area">
  <option value="基隆市">Keelung City</option>
  <option value="新北市">New Taipei City</option>
  <option value="台北市">Taipei City</option>
  <option value="桃園市">Taoyuan City</option>
  <option value="新竹縣">Hsinchu County</option>
  <option value="新竹市">Hsinchu City</option>
  <option value="苗栗縣">Miaoli County</option>
  <option value="台中市">Taichung City</option>
  <option value="彰化縣">Changhua County</option>
  <option value="南投縣">Nantou County</option>
  <option value="雲林縣">Yunlin County</option>
  <option value="嘉義縣">Chiayi County</option>
  <option value="嘉義市">Chiayi City</option>
  <option value="台南市">Tainan City</option>
  <option value="高雄市">Kaohsiung City</option>
  <option value="屏東縣">Pingtung County</option>
  <option value="宜蘭縣">Yilan County</option>
  <option value="花蓮縣">Hualien County</option>
  <option value="台東縣">Taitung County</option>
  <option value="澎湖縣">Penghu County</option>
  <option value="金門縣">Kinmen County</option>
  <option value="連江縣">Lienchiang County</option>
</datalist>

輸出預覽



範例 CodePen

See the Pen
HTML <datalist> 輸入欄位可自動補字之下拉選單
by Feng, Cheng-Chi (@qwe987299)
on CodePen.


▲ 精選圖片/原始碼與預覽截圖。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇