[AJAX] JS - AJAX - PHP 아작스 예제 ★ (= 입력제시어 = 입력예제)

작동 메커니즘 

 

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;

?>