ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [PHP] 53. AJAX 실시간 검색 ( AJAX Live Search) - PHP 강좌, PHP5
    Web/PHP 2015. 6. 13. 14:15


    PHP Example - AJAX Live Search

     AJAX는 좀 더 사용자 친화적이고 상호작용적 검색을 만드는데 사용됩니다.




    1. AJAX Live Search

     아래 예제는 사용자가 타이핑하는 동안 실시간 검색을 할 수 있게 보여줍니다.


     실시간 검색(Live Search)는 기본 검색과 비교했을 때 많은 장점을 갖습니다:

      - 타이핑과 동시에 결과 보여줌

      - 타이핑하는 동안 작은 결과창 보여줌









    2. Example Explained - The HTML Page



     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
    <html>
    <head>
    <script>
    function showResult(str) {
      if (str.length==0) { 
        document.getElementById("livesearch").innerHTML="";
        document.getElementById("livesearch").style.border="0px";
        return;
      }
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
          document.getElementById("livesearch").style.border="1px solid #A5ACB2";
        }
      }
      xmlhttp.open("GET","livesearch.php?q="+str,true);
      xmlhttp.send();
    }
    </script>
    </head>
    <body>
     
    <form>
    <input type="text" size="30" onkeyup="showResult(this.value)">
    <div id="livesearch"></div>
    </form>
     
    </body>
    </html>
    cs






    3. The PHP File

     


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <?php
    $xmlDoc=new DOMDocument();
    $xmlDoc->load("links.xml");
     
    $x=$xmlDoc->getElementsByTagName('link');
     
    //get the q parameter from URL
    $q=$_GET["q"];
     
    //lookup all links from the xml file if length of q>0
    if (strlen($q)>0) {
      $hint="";
      for($i=0$i<($x->length); $i++) {
        $y=$x->item($i)->getElementsByTagName('title');
        $z=$x->item($i)->getElementsByTagName('url');
        if ($y->item(0)->nodeType==1) {
          //find a link matching the search text
          if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
            if ($hint=="") {
              $hint="<a href='" . 
              $z->item(0)->childNodes->item(0)->nodeValue . 
              "' target='_blank'>" . 
              $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            } else {
              $hint=$hint . "<br /><a href='" . 
              $z->item(0)->childNodes->item(0)->nodeValue . 
              "' target='_blank'>" . 
              $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }
          }
        }
      }
    }
     
    // Set output to "no suggestion" if no hint was found
    // or to the correct values
    if ($hint=="") {
      $response="no suggestion";
    else {
      $response=$hint;
    }
     
    //output the response
    echo $response;
    ?>
    cs

     


    links.xml


     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <?xml version="1.0" encoding="utf-8"?>
    <pages>
      <link>
        <title>HTML a tag</title>
      </link>
      <link>
        <title>HTML br tag</title>
      </link>
      <link>
        <title>CSS background Property</title>
      </link>
      <link>
        <title>CSS border Property</title>
      </link>
      <link>
        <title>JavaScript Date Object</title>
      </link>
      <link>
        <title>JavaScript Array Object</title>
      </link>
    </pages>
    cs









    * 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

    댓글

Designed by Tistory.