Cara Membuat Autocomplete Pencarian dengan PHP Step by Step

29 Feb 2016 04:18 • Post By

Cara Membuat Autocomplete Pencarian dengan PHP Step by Step


Berlanjut lagi sobat tutorialku.net pada lanjutan artikel saya kali ini akan memberikan lagi cara membuat Autocomplete menggunakan script PHP, Autocomplete sendiri banyak digunakan di beberapa situs baik di google, youtube, facebook, twitter, bahkan situs grabber video atau grabber mp3 pun sekarang banyak yang sudah memekai Autocomplete pada kolom pencarian web mereka tapi hayoo.. ada yang tahu tidak apa itu Autocomplete hahaha jika ada yang tidak tahu nanti saya kasih tau.

Autocomplete adalah fitur di mana sebuah aplikasi memprediksi sisa kata pada suatu kolom pencarian, dalam antarmuka pengunjung grafis , pengunjung biasanya dapat menekan tombol tab untuk menerima saran atau bawah tombol panah untuk menerima salah satu dari beberapa pilihan yang ada pada kolom pencarian.

Autocomplete mempercepat interaksi pengunjung komputer ketika benar mencari sebuah kata dari pencarian bermaksud untuk mencari beberapa karakter yang telah diketik ke dalam kolom input teks. Hal ini bekerja di domain dengan sejumlah kata-kata yang mungkin sudah (seperti dalam interpreter baris perintah), ketika beberapa kata-kata yang lebih umum (seperti ketika menangani sebuah e-mail ), atau menulis teks terstruktur dan dapat diprediksi (seperti dalam kode sumber editor).

Banyak Autocomplete algoritma kata-kata baru setelah pengunjung telah menulis di kolom pencarian dalam beberapa kali, dan dapat menyarankan alternatif berdasarkan pada kebiasaan mencari sesuatu yang pengunjung ingin cari.

Langsung saja ke prakteknya untuk membuat Autocomplete secara step by step dari tutorialku.net dan simak baik-baik sambil makan makanan ringan dengan se-ember kopi panas #uhuk ^_^

1. Untuk halaman awal buatlah file index.html kemudian isi di dalam file dengan script dibawah ini :
<html>
   <head>
      
      <style>
         div {
            width:240px;
            color:green;
         }
      </style>
      
      <script>
         function showResult(str) {
			
            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").style.border = "0px";
               return;
            }
            
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               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>
         <h2>Enter Course Name</h2>
         <input type="text" size="30" onkeyup="showResult(this.value)">
         <div id="livesearch"></div>
         <a href="http://www.tutorialku.net/">More Details </a>
      </form>
      
   </body>
</html>

2. Selanjutnya buatlah file dengan nama livesearch.php lalu masukan script dibawah ini dengan santai jangan gugup ya #palu
<?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.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) {
            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 = "Please enter a valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

3. Dan yang teakhir buatlah file dengan nama autocomplete.xml terus isi lah dengan script dibawah ini.
<pages>

   <link>
      <title>Programmer</title>
      <url>http://www.tutorialku.net/category/programmer/1.xhtml</url>
   </link>

   <link>
      <title>Android</title>
      <url>http://www.tutorialku.net/category/android/1.xhtml</url>
   </link>

   <link>
      <title>Trik dan Tips </title>
      <url>http://www.tutorialku.net/category/trik-dan-tips/1.xhtml</url>
   </link>

   <link>
      <title>Seo</title>
      <url>http://www.tutorialku.net/category/belajar-seo/1.xhtml</url>
   </link>

   <link>
      <title>Css</title>
      <url>http://www.tutorialku.net/category/belajar-css/1.xhtml</url>
   </link>

   <link>
      <title>PHP</title>
      <url>http://www.tutorialku.net/category/tutorial-php/1.xhtml</url>
   </link>

   <link>
      <title>Javascript</title>
      <url>http://www.tutorialku.net/category/belajar-javascript/1.xhtml</url>
   </link>

   <link>
      <title>Nulled</title>
      <url>http://www.tutorialku.net/category/nulled-script/1.xhtml</url>
   </link>

</pages>

Selesai dan nanti hasilnya akan seperti Demo dibawah ini :


Bagaimana mudah bukan, hehehe jadi tidak sesulit yang kalian bayangkan untuk membuat Autocomplete dengan menggunakan kode PHP.

Baiklan sampai disini dulu sampai berlanjut lagi dengan artikel saya selanjutnya dan semoga hal ini sangat bermanfaat bisa membantu memecah permasalahan anda.

Sampai Jumpa.. ^_^

Jangan lupa Subscribe ya !!

Cara Membuat Autocomplete Pencarian dengan PHP Step by Step | Tutorialku.Net | 4.5