แท็ก datalist

แท็ก datalist สร้างการเติมข้อความอัตโนมัติ สำหรับช่องป้อนข้อมูล input ใน ฟอร์ม HTML

สาระสำคัญของการเติมข้อความอัตโนมัติ: เมื่อผู้ใช้ พยายามพิมพ์บางอย่างลงในช่องป้อนข้อมูล ข้างล่าง จะปรากฏคำแนะนำแบบป๊อปอัป ซึ่งจะแสดงเป็นรายการตัวเลือก ที่พร้อมใช้งาน ผู้ใช้สามารถเลือก หนึ่งในตัวเลือกที่เสนอได้ โดยไม่ต้องป้อน ให้เสร็จสมบูรณ์

เพื่อเชื่อมโยงการเติมข้อความอัตโนมัติกับแท็ก input จำเป็นต้องกำหนดแอตทริบิวต์ list ให้กับแท็กนั้น โดยภายในแอตทริบิวต์นี้ระบุ id ของแท็ก datalist ที่ต้องการเชื่อมโยง

ตัวเลือกจะถูกเก็บไว้ในแท็ก option ซึ่งอยู่ในแท็ก datalist อีกที

ตัวอย่าง

ลองป้อนชื่อประเทศในช่องป้อนข้อมูล เริ่มต้นด้วยการพิมพ์ ตัวอักษร 'b' - และเราจะเห็น คำแนะนำแบบป๊อปอัปที่มีสามประเทศ จากนั้นพิมพ์เพิ่ม ตัวอักษร 'e' - จำนวนประเทศที่เสนอ จะลดลงเหลือสอง:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

ตัวอย่าง

ทีนี้ลองเพิ่มแอตทริบิวต์ value ให้กับแท็ก option เมื่อเลือกประเทศ ใดประเทศหนึ่ง สิ่งที่จะไปปรากฏในอินพุตที่เชื่อมโยงจะไม่ใช่ชื่อประเทศ แต่จะเป็นเนื้อหาภายในแอตทริบิวต์ value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

ตัวอย่าง . ผลกระทบของแอตทริบิวต์ autocomplete

รายการดรอปดาวน์ของคำแนะนำได้รับ ผลกระทบจากแอตทริบิวต์ autocomplete หากเปิดใช้งาน (ซึ่งจะเป็นค่าเริ่มต้น) ค่าต่างๆ ที่คุณตั้งไว้ในแท็ก datalist จะถูกผสมกับค่าที่ผู้ใช้เคยป้อนลงในช่องนี้มาก่อน

ลองพิมพ์ 'Brazil' ลงในช่องแล้วกด ปุ่มส่ง (ถ้าไม่ส่ง บราวเซอร์จะจำประเทศนี้ไม่ได้) จากนั้นกลับมาที่ตัวอย่างนี้ และพิมพ์ตัวอักษร 'b' - ในรายการ ที่ปรากฏขึ้น คุณจะเห็นไม่เพียงแค่ 3 ประเทศ จาก datalist แต่ยังรวมถึงประเทศที่เคยพิมพ์ไว้ก่อนหน้าด้วย (นอกจาก นี้ หากคุณทำแบบเดียวกันกับคำว่า 'Belarus' - ในรายการดรอปดาวน์ ค่าดังกล่าวจะปรากฏสองครั้ง)

หากสิ่งนี้รบกวนคุณ - ให้ปิดแอตทริบิวต์ autocomplete โดยกำหนดค่าเป็น off

ลองทำตามขั้นตอนที่อธิบายไว้ด้านบนกับตัวอย่างนี้:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

ดูเพิ่มเติม

แอตทริบิวต์ autocomplete,
ซึ่งกำหนดการเติมข้อความอัตโนมัติให้กับช่องของฟอร์ม