溫馨提示×

form表單中如何實現自動補全功能

小樊
95
2024-06-29 19:08:38
欄目: 編程語言

要實現自動補全功能,可以使用HTML5的datalist元素結合input元素來實現。

首先,在form表單中添加一個input元素,并設置其type為"text",然后為該input元素添加一個list屬性,并設置其值為一個datalist元素的id。例如:

<form>
  <label for="fruit">選擇水果:</label>
  <input type="text" id="fruit" list="fruits">
  <datalist id="fruits">
    <option value="蘋果">
    <option value="香蕉">
    <option value="橙子">
    <option value="西瓜">
    <option value="葡萄">
  </datalist>
  <input type="submit" value="提交">
</form>

在上面的示例中,datalist元素中包含了一些選項,當用戶在input元素中輸入內容時,瀏覽器會自動顯示datalist中匹配的選項,用戶可以通過鍵盤的上下箭頭選擇其中一個選項,然后點擊提交按鈕。

這樣就實現了簡單的自動補全功能。需要注意的是,datalist元素并不支持所有瀏覽器,所以在使用時需要進行兼容性考慮。

0