คุณสมบัติ autocomplete ของ HTML DOM Input Search

คุณสมบัติ autocomplete ของ HTML DOM Input Search เกี่ยวข้องกับแอตทริบิวต์ autocomplete ขององค์ประกอบ <input> ที่มี type=“search” แอตทริบิวต์ autocomplete รับค่า “on” หรือ “off” ค่า on ระบุว่าเบราว์เซอร์ต้องทำให้ข้อความของผู้ใช้สมบูรณ์โดยอัตโนมัติตามการป้อนข้อมูลก่อนหน้า ในขณะที่ false ระบุว่าจะไม่ทำให้สมบูรณ์

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ autocomplete:

searchObject.autocomplete = "on|off"

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

ตัวอย่าง

มาดูตัวอย่างการใช้คุณสมบัติ autocomplete ของ Input Search:

<!DOCTYPE html> <html> <body> <h1>Input Search autocomplete property</h1> <form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> <input type="submit"> </form> <p>ปิด autocomplete ในช่องค้นหาด้านบนโดยคลิกปุ่มด้านล่าง</p> <button onclick="changeAuto()">Autocomplete Off</button> <p id="Sample"></p> <script>    function changeAuto() {       document.getElementById("SEARCH1").autocomplete = "off";       document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";    } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อพิมพ์ข้อความในช่องด้านบน จะเห็นข้อความของคุณทำให้สมบูรณ์โดยอัตโนมัติตามการป้อนข้อมูลก่อนหน้า:

เมื่อคลิกปุ่ม “Autocomplete Off” ข้อความอัตโนมัติจะไม่ถูกบันทึก:

ในตัวอย่างข้างต้น:

เราสร้างองค์ประกอบ <input> ที่มี type=“search” name=“fruits” และตั้งค่าแอตทริบิวต์ autocomplete เป็น on ซึ่งทำให้ข้อความสมบูรณ์ตามการป้อนข้อมูลก่อนหน้า ช่องค้นหาอยู่ภายในฟอร์มที่มีปุ่ม Submit สำหรับส่งข้อมูลฟอร์มไปยังเซิร์ฟเวอร์:

<form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> <input type="submit"> </form>

เราสร้างปุ่ม “Autocomplete Off” ที่จะเรียกใช้เมธอด changeAuto() เมื่อผู้ใช้คลิก:

<button onclick="changeAuto()">Autocomplete Off</button>

เมธอด changeAuto() ดึงองค์ประกอบ <input> ที่มี type “search” โดยใช้ getElementById() และตั้งค่าแอตทริบิวต์ autocomplete เป็น off หมายความว่าข้อความจะไม่ถูกทำให้สมบูรณ์อัตโนมัติอีกต่อไป และผู้ใช้ต้องพิมพ์ข้อความเต็มรูปแบบด้วยตนเอง เราแสดงข้อความเกี่ยวกับการเปลี่ยนแปลงนี้ในย่อหน้าที่มี id “Sample” โดยใช้คุณสมบัติ innerHTML:

function changeAuto() {    document.getElementById("SEARCH1").autocomplete = "off";    document.getElementById("Sample").innerHTML = "Your text will not autocomplete now"; }