Membuat Auto Sugesti Pencarian Menggunakan Php dan Ajax
Jurnalcode.com

Membuat Auto Sugesti Pencarian Menggunakan Php dan Ajax

Membuat Auto Sugesti Pencarian Menggunakan Php dan Ajax


Jurnalcode : Kali ini saya akan membuat sebuah tutorial bagaimana membuat sugesti atau Hint pada sebuah kolom pencarian menggunakan ajax dan php , tutorial ini dibuat sesuai dengan kebutuhan saat ini kemudahn dan efisiensi pencarian data sangat dibutuhkan dalam sebuah aplikasi maupun website.  pada tutorial ini saya akan mennjukan bagaimana ajax akan bekerja pada sebuah form saan kondisi onkeyup event.

Baiklah langsung saja kita membuat sebuah file html yang berisi html dan ajax

Silahkan Buat sebuah file html dengan nama pencarian.html

<!DOCTYPE html>
<html>
<body>

<h1>pencarian Jurnalcode</h1>

<h2>Silahkan Ketikan Beberapa Kata Pada Kolom dibawah :</h2>

<form action=""> 
Pencarian: <input type="text" id="txt1" onkeyup="TampilCari(this.value)">
</form>

<p>Hasil Pencarian: <span id="HasilCari"></span></p> 

<script>
function TampilCari(str) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById("HasilCari").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("HasilCari").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "DataPencarian.php?q="+str, true);
  xhttp.send();   
}
</script>

</body>
</html>

Kemudian Silahkan Buat data Array menggunakan php , Anda juga bisa langsung mengarahkan nya ke database . Buat sebuah file dengan Nama Datapencarian.php dan isi code berikut :

 <?php
// Array Data Website
$a[] = "Jurnalcode";
$a[] = "Popoji";
$a[] = "Laravel";
$a[] = "Codeigniter";
$a[] = "Phalcon";
$a[] = "ExtJs";
$a[] = "Ajax";
$a[] = "Bootstrap";
$a[] = "css";
$a[] = "html";
$a[] = "Wordpress";
$a[] = "joomla";
$a[] = "Javascript";
$a[] = "phyton";
$a[] = "flarum";
$a[] = "VB";
$a[] = "Basic";
$a[] = "R";
$a[] = "Cobol";
$a[] = "SEO";
$a[] = "MeteorJs";

// Mengambil Paramneter q
$q = $_REQUEST["q"];

$TampilCari = "";

if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $pencarian) {
        if (stristr($q, substr($pencarian, 0, $len))) {
            if ($TampilCari === "") {
                $TampilCari = $pencarian;
            } else {
                $TampilCari .= ", $pencarian";
            }
        }
    }
}


echo $TampilCari === "" ? "Tidak ada pencarian dengan Kata " : $TampilCari ;
?>

 nah jika sudah selesai silahkan Jalankan melalui browser kesayangan anda  . sekian tutorial dari saya selamat mencoba dan berekplorasi . Jika ada pertanyaan silahkan masukan melalui kolom dibawah. salam coder

.

Ayo Komentar