Live Search sử dụng Ajax

Trong bài này sẽ trình bày ví dụ minh họa ứng dụng Live Search sử dụng kỹ thuật Ajax.

chuẩn bị tệp links.xml: Xem tại đây

Trong ví dụ này sẽ tạo chức năng khi người dùng nhập nội dung tìm kiếm sẽ hiển thị ra gợi ý tìm kiếm

Tạo file index.php có mã như sau:

    <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 (this.readyState==4 && this.status==200) {
              document.getElementById("livesearch").innerHTML=this.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>

Giải thích:

  • Trước tiên, kiểm tra đầu vào có dữ liệu hay không (str.length == 0).
  • Nếu trường đầu vào không phải là rỗng, hàm showResult () thực hiện các thao tác sau:

    • Tạo một đối tượng XMLHttpRequest
    • Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
    • Gửi yêu cầu tới tệp PHP (livesearch.php) trên máy chủ
    • Lưu ý rằng tham số q được thêm vào url (livesearch.php?q = " + str)
    • Và biến str chứa nội dung của trường đầu vào

Tệp PHP (livesearch.php) truy vấn đối với tệp tin livesearch.xml, tìm kiếm tiêu đề phù hợp với chuỗi tìm kiếm và trả về kết quả:

    $xmlDoc=new DOMDocument();
    $xmlDoc->load("http://laedaily.com/laravel-filemanager/photos/1/php/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;
Xem ví dụ »