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'를 참조하여 작성하였습니다.

      저작자표시

      'Web > PHP' 카테고리의 다른 글

      [PHP] 55. AJAX Poll - PHP 강좌, PHP5  (0) 2015.06.13
      [PHP] 54. AJAX RSS Reader - PHP 강좌, PHP5  (0) 2015.06.13
      [PHP] 52. AJAX 와 XML ( AJAX and XML) - PHP 강좌, PHP5  (0) 2015.06.13
      [PHP] 51. AJAX 와 MySQL ( AJAX and MySQL) - PHP 강좌, PHP5  (0) 2015.06.13
      [PHP] 50. AJAX 와 PHP(AJAX and PHP) - PHP 강좌, PHP5  (0) 2015.06.13
      [PHP] 49. AJAX 소개( AJAX Introduction) - PHP 강좌, PHP5  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바