Membuat Live Search Menggunakan Ajax dan php
Jurnalcode.com

Membuata Live Search Menggunakan Ajax dan php

Membuat Live Search Menggunakan Ajax dan php


Jurnalcode : Kali ini saya akan membuat tutorial bagaimana membuat live search menggunakan ajax dan php. pada kasus kali ini saya menggunakan xml sebagi object.  kita sering melihat live search ini di situs - situs besar seperti google , bukalapak,tokopedia, zalora dan banyak lagi. hal ini di terapkan guna efisiensi pencarian data oleh pengguna dan pengunjung atau pelanggan. dengan adanya live search tentunya akan mempermudah pengunjung website melakukan pencarian di situs kita .

Baiklah langsung saja kita ke inti permasalahan nya. langkah pertama yang harus dibuat adalah :

Silahkan Buat sebah file index.php

<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> 

 

Kemudian silahkan buat file php sebagai proses data dan beri nama livesearch.php

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');
$q=$_GET["q"];
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>";
        }
      }
    }
  }
}

if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}
echo $response;
?> 

 

Keterangan :

Jika ada teks yang dikirim dari JavaScript (strlen ($ q)> 0), maka yang terjadi adalah :

  • Muat file XML ke objek XML DOM baru
  • Loop melalui semua elemenuntuk menemukan kecocokan dari teks yang dikirim dari JavaScript
  • Menetapkan url dan judul yang benar dalam variabel "$ response". Jika lebih dari satu Kecocokan Data ditemukan, semua kecocokan ditambahkan ke variabel
  • Jika tidak ada kecocokan yang ditemukan, variabel respons $ disetel ke "no suggestion"

Baiklah sekian tutorial dari saya semoga bermanfaat . silahkan kembangkan lagi , selamat belajar dan salam coder

 

Referansi : w3school

.

Ayo Komentar