ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างการใช้แท็ก HTML5 Datalist (ส่วนประกอบที่สมบูรณ์โดยอัตโนมัติ) เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ในอดีตฉันต้องเขียนส่วนประกอบความสำเร็จอัตโนมัติ (แนะนำ) ใน JS ซึ่งยากมาก ในยุค HTML5 ไม่จำเป็นอีกต่อไป มันใช้แท็ก Datalist โดยตรงซึ่งจะช่วยลดปริมาณงานโดยตรง ดังนี้
<! doctype html>
<html>
<head>
<title> html5 datalist tag </title>
<meta charset = "utf-8">
</head>
<p>
เวอร์ชันเบราว์เซอร์: <input list = "words">
</p>
<Datalist>
<ตัวเลือกค่า = "Internet Explorer">
<ตัวเลือกค่า = "firefox">
<ตัวเลือกค่า = "Chrome">
<ตัวเลือกค่า = "โอเปร่า">
<ตัวเลือกค่า = "Safari">
<ตัวเลือกค่า = "sogou">
<ตัวเลือกค่า = "maxthon">
</tatalist>
</body>
</html>
Datalist จัดเตรียมรายการที่กำหนดไว้ล่วงหน้าซึ่งเชื่อมโยงกับอินพุตผ่าน ID เมื่อป้อนอินพุตในอินพุตจะมีฟังก์ชั่นการเสร็จสิ้นอัตโนมัติและผู้ใช้จะเห็นรายการดรอปดาวน์เพื่อเลือก
รองรับ Chrome/Firefox/Opera และ IE10+ และ Safari ยังไม่รองรับจนถึงเวอร์ชัน 7