Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM Input Search 자동 완성(autocomplete) 속성 완벽 정리

HTML DOM의 Input Search 자동 완성(autocomplete) 속성은 type="search"로 지정된 <input> 요소의 autocomplete 속성과 연결됩니다. 이 속성은 "on" 또는 "off" 두 가지 값을 가질 수 있으며, "on"으로 설정하면 웹 브라우저가 사용자의 이전 입력 내용을 기반으로 텍스트를 자동으로 완성해 줍니다. 반대로 "off"로 설정하면 자동 완성 기능이 비활성화되어 사용자가 직접 전체 텍스트를 입력해야 합니다.

문법(Syntax)

autocomplete 속성을 설정하는 문법은 다음과 같습니다.

searchObject.autocomplete = "on|off"

여기서 on은 브라우저가 이전 입력을 바탕으로 사용자의 입력을 자동으로 완성하도록 하고, off는 이전 입력을 참조하지 않고 자동 완성을 수행하지 않음을 의미합니다. 별도로 설정하지 않으면 기본값은 on입니다.

예제(Example)

Input Search autocomplete 속성의 실제 동작 예제를 살펴보겠습니다.

<!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>아래 버튼을 클릭하여 검색 필드의 자동 완성을 끌 수 있습니다</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
    function changeAuto() {
        document.getElementById("SEARCH1").autocomplete = "off";
        document.getElementById("Sample").innerHTML = "이제 텍스트가 자동 완성되지 않습니다";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

검색 필드에 텍스트를 입력하면, 이전에 입력했던 내용을 기반으로 자동 완성 목록이 나타나는 것을 확인할 수 있습니다.

그러나 "Autocomplete Off" 버튼을 클릭한 후에는 더 이상 자동 완성 텍스트가 표시되지 않습니다.

예제 코드 분석

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. 검색 입력 필드 생성

먼저 type="search", name="fruits"로 지정된 <input> 요소를 생성하고 autocomplete 속성을 on으로 설정했습니다. 이렇게 하면 사용자가 이전에 입력한 내용을 기준으로 텍스트가 자동 완성됩니다. 이 검색 필드는 폼(form) 내부에 위치하며, 폼에는 서버로 데이터를 전송하기 위한 제출(Submit) 버튼도 포함되어 있습니다.

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

2. 자동 완성 해제 버튼 생성

다음으로 "Autocomplete Off" 버튼을 만들었습니다. 사용자가 이 버튼을 클릭하면 changeAuto() 함수가 실행됩니다.

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

3. changeAuto() 함수 구현

changeAuto() 함수는 getElementById() 메서드를 사용하여 type이 "search"인 <input> 요소에 접근하고, 해당 요소의 autocomplete 속성값을 off로 변경합니다. 이렇게 되면 더 이상 텍스트가 자동 완성되지 않으며, 사용자가 전체 텍스트를 직접 입력해야 합니다. 마지막으로 innerHTML 속성을 활용해 id가 "Sample"인 단락에 변경 사항을 알리는 메시지를 출력합니다.

function changeAuto() {
    document.getElementById("SEARCH1").autocomplete = "off";
    document.getElementById("Sample").innerHTML = "이제 텍스트가 자동 완성되지 않습니다";
}

정리

HTML DOM의 autocomplete 속성을 활용하면 JavaScript만으로 검색 입력 필드의 자동 완성 기능을 동적으로 제어할 수 있습니다. 개인정보 보호가 중요한 입력란이나 자동 완성이 오히려 방해가 되는 경우에 이 속성을 off로 전환하는 방식이 실무에서 유용하게 활용됩니다.