작동 메커니즘
1.
입력창에 문자 입력 시, onkeyup 이벤트에 의해 hz() 함수가 실행됨.
2.
문자열 길이로 입력 여부 확인 (str.length == 0).
2-1.
입력창이 비어있는 (즉, str.length == 0) 경우라면,
id="txtHint" 요소의 placeholder 내용을 지우고 함수를 종료.
2-2.
입력창이 비어있지 않은 (즉, str.length !== 0) 경우라면,
XMLHttpRequest 객체 만들기
서버 응답이 준비되었을 때 실행될 함수를 생성.
요청을 서버의 PHP 파일 (a.php)로 보냄.
q 매개 변수는 입력한 문자열임. (즉, a.php? q = "+ str)
str 변수는 입력 필드의 내용을 유지
b.php
아래 제시어들 입력해보세요.
※ 홈짱닷컴
※ Homzzang.com
※ 홈페이지 제작 가이드
<p>제안: <span id="txtHint"></span></p>
<p>First name: <input type="text" id="txt1" onkeyup="hz(this.value)"></p>
<script>
function hz(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "a.php?q="+str, true);
xhttp.send();
}
</script>
a.php
<?php
$a[] = "홈짱닷컴";
$a[] = "Homzzang.com";
$q = $_REQUEST["q"];
$hint = "";
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
echo $hint === "" ? "제안 없음" : $hint;
?>
