要實現自動補全功能,可以使用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元素并不支持所有瀏覽器,所以在使用時需要進行兼容性考慮。