Thuộc tính autocomplete của Input Search trong HTML DOM

Thuộc tính autocomplete của Input Search trong HTML DOM liên quan đến thuộc tính autocomplete của phần tử <input> với type="search". Thuộc tính autocomplete nhận giá trị "on" hoặc "off". Giá trị on chỉ định trình duyệt sẽ tự động hoàn thành văn bản người dùng dựa trên đầu vào trước đó, trong khi off thì ngược lại. Mặc định giá trị là on.

Cú pháp

Cú pháp để thiết lập thuộc tính autocomplete:

searchObject.autocomplete = "on|off"

Trong đó, on có nghĩa là trình duyệt sẽ tự động hoàn thành đầu vào của người dùng dựa trên đầu vào trước đó, off nghĩa là sẽ không tự động hoàn thành bất kỳ đầu vào nào.

Ví dụ

Ví dụ minh họa cho thuộc tính autocomplete của Input Search:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính autocomplete của Input Search</h1> 
<form action="/Sample_page.php"> 
    TRÁI CÂY: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> 
    <input type="submit"> 
</form> 
<p>Tắt autocomplete trong ô tìm kiếm trên bằng cách nhấn nút dưới đây</p> 
<button onclick="changeAuto()">Tắt Autocomplete</button> 
<p id="Sample"></p> 
<script> 
    function changeAuto() { 
        document.getElementById("SEARCH1").autocomplete = "off"; 
        document.getElementById("Sample").innerHTML = "Văn bản của bạn sẽ không tự động hoàn thành nữa"; 
    } 
</script> </body> </html>

Kết quả

Khi gõ văn bản trong ô tìm kiếm, bạn sẽ thấy văn bản tự động hoàn thành dựa trên đầu vào trước.

Sau khi nhấn nút "Tắt Autocomplete", văn bản tự động hoàn thành sẽ không còn được hiển thị.

Giải thích ví dụ

Tạo phần tử <input> với type="search", name="fruits" và thiết lập thuộc tính autocomplete thành on. Ô tìm kiếm nằm trong form có nút Submit để gửi dữ liệu lên server.

Tạo nút "Tắt Autocomplete" sẽ thực thi hàm changeAuto() khi được nhấn:

<button onclick="changeAuto()">Tắt Autocomplete</button>

Hàm changeAuto() lấy phần tử input type="search" bằng getElementById() và thiết lập thuộc tính autocomplete thành off. Thông báo thay đổi được hiển thị trong đoạn văn id="Sample" sử dụng innerHTML:

function changeAuto() { 
    document.getElementById("SEARCH1").autocomplete = "off"; 
    document.getElementById("Sample").innerHTML = "Văn bản của bạn sẽ không tự động hoàn thành nữa"; 
}