HTML DOM 입력 검색 자동 완성 속성

<시간/>

HTML DOM 입력 검색 자동 완성 속성은 type=”search”인 요소의 autocomplete 속성과 연결됩니다. autocomplete 속성은 "on" 또는 "off" 값을 취합니다. on 값은 웹 브라우저가 이전 입력을 기반으로 사용자 텍스트를 자동으로 완성해야 함을 지정하고 그렇지 않으면 false 상태입니다.

구문

다음은 −

의 구문입니다.

자동 완성 속성 설정 -

searchObject.autocomplete = "on|off"

여기서 on은 웹 브라우저가 이전 입력을 기반으로 사용자 입력을 자동으로 완료한다는 것을 의미하고 false는 이전 입력을 기반으로 사용자 입력을 완료하지 않을 것임을 나타냅니다. 기본값은 on으로 설정되어 있습니다.

예시

입력 검색 자동 완성 속성의 예를 살펴보겠습니다 -

<!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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 검색 자동 완성 속성

위 필드에 일부 텍스트를 입력하면 이전 입력을 기반으로 텍스트 자동 완성을 볼 수 있습니다 -

HTML DOM 입력 검색 자동 완성 속성

"자동 완성 끄기" 버튼을 클릭하면 자동 완성 텍스트가 캡처되지 않습니다 -

HTML DOM 입력 검색 자동 완성 속성

위의 예에서 -

먼저 type=”search”, name=”fruits”인 요소를 만들고 autocomplete 속성을 on으로 설정했습니다. 이렇게 하면 이전 입력을 기반으로 텍스트가 완성됩니다. 검색 필드는 양식 데이터를 서버에 제출하기 위한 제출 버튼이 포함된 양식 안에 있습니다 -

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

그런 다음 사용자가 클릭할 때 changeAuto() 메서드를 실행하는 "Autocomplete Off" 버튼을 만듭니다.

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

changeAuto() 메서드는 getElementById() 메서드를 사용하여 "search" 유형의 요소를 가져오고 autocomplete 속성 값을 off로 설정합니다. 이것은 텍스트가 지금 자동 완성되지 않고 사용자가 완전한 텍스트를 수동으로 입력해야 함을 의미합니다. 그런 다음 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 이 변경 사항에 관한 메시지를 표시합니다 -

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