Thuộc tính tự động hoàn thành Tìm kiếm đầu vào HTML DOM

Thuộc tính tự động hoàn thành Tìm kiếm đầu vào HTML DOM được liên kết với thuộc tính tự động hoàn thành của phần tử với type =”search”. Thuộc tính tự động hoàn thành có giá trị “bật” hoặc “tắt”. Giá trị on chỉ định rằng trình duyệt web phải tự động hoàn thành văn bản của người dùng dựa trên thông tin đầu vào trước đó trong khi trạng thái sai khác.

Cú pháp

Sau đây là cú pháp cho -

Đặt Thuộc tính tự động hoàn thành -

searchObject.autocomplete = "on|off"

Ở đây, bật có nghĩa là trình duyệt web sẽ tự động hoàn thành quá trình nhập của người dùng dựa trên thông tin nhập trước đó trong khi sai nói rằng nó sẽ không hoàn thành bất kỳ thao tác nhập nào của người dùng dựa trên các thông tin đầu vào trước đó. Nó có giá trị được đặt thành bật theo mặc định.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính tự động hoàn thành Tìm kiếm đầu vào -

<!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>Off the autocomplete in the above search field by clicking on the below button</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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính tự động hoàn thành Tìm kiếm đầu vào HTML DOM

Khi nhập một số văn bản vào trường trên, bạn có thể thấy văn bản tự động hoàn thành dựa trên thông tin nhập trước đó của bạn -

Thuộc tính tự động hoàn thành Tìm kiếm đầu vào HTML DOM

Khi nhấp vào nút “Tắt tự động hoàn thành”, văn bản tự động hoàn thành sẽ không được ghi lại -

Thuộc tính tự động hoàn thành Tìm kiếm đầu vào HTML DOM

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một phần tử với type =”search”, name =”results” và đặt thuộc tính tự động hoàn thành của nó thành bật. Điều này đảm bảo rằng văn bản sẽ hoàn chỉnh dựa trên đầu vào trước đó của chúng tôi. Trường tìm kiếm bên trong biểu mẫu cũng chứa nút Gửi để gửi dữ liệu biểu mẫu tới máy chủ -

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

Sau đó, chúng tôi tạo một nút “Tắt tự động hoàn thành” sẽ thực thi phương thức changeAuto () khi người dùng nhấp vào -

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

Phương thức changeAuto () nhận phần tử với kiểu "tìm kiếm" bằng cách sử dụng phương thức getElementById () và đặt giá trị thuộc tính tự động hoàn thành của nó thành tắt. Điều này có nghĩa là văn bản sẽ không được tự động hoàn thành ngay bây giờ và người dùng sẽ phải nhập văn bản hoàn chỉnh theo cách thủ công. Sau đó, chúng tôi hiển thị thông báo liên quan đến thay đổi này trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -

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