Kolaborasi Auto Complete Jquery UI dan PHP dan langkahnya

Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Kolaborasi Auto Complete Jquery UI dan PHP, dimana sebuah form search kita berikan Auto Complete dan kita gabungkan dengan database menggunakan PHP. Untuk teman-teman bisa lihat tutorial Dumet School tentang Cara Membuat Auto Complete Seacrh Dengan Jquery UI, dari tutorial tersebut masih menggunakan extensi .html agar bisa terkoneksi dengan database teman-teman rubah dengan extensi .php. Kalian bisa copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kolaborasi Auto Complete Jquery UI dan PHP</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var pencarian = [
      "Laptop",
      "Hanphone",
      "Monitor",
      "TV",
      "AC",
      "Plastation",
      "Blender",
      "USB",
      "VGA",
      "RAM",
      "Keyboard"
    ];
    $( "#Cari" ).autocomplete({
      source: pencarian
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="Cari">Cari: </label>
  <input id="Cari">
</div>
 
 
</body>
</html>

<!doctype html>

<head>

<title>Kolaborasi Auto Complete Jquery UI dan PHP</title>

$( function() {

var pencarian = [

"Laptop",

"Hanphone",

"Monitor",

"TV",

"AC",

"Plastation",

"Blender",

"USB",

"VGA",

"RAM",

"Keyboard"

];

$( "#Cari" ).autocomplete({

source: pencarian

});

} );

</script>

</head>

<body>

</div>

</body>

</html>

Kemudian buat folder di dalam htdocs dan save file dengan nama index.php, jika sudah lalu panggil pada url nya

Langkah berikutnya kita implementasikan Kolaborasi Auto Complete Jquery UI dan PHP, teman-teman buat database nya terlebih dahulu, disini saya membuat database dengan nama search dan nama table nya pencarian

Jika sudah, klik insert lalu isi beberapa data nya ke dalam table. Disini saya berikan nama-nama script, jika sudah klik tombol Go sampai jadi seperti ini

Kemudian kita buat config nya untuk menghubungkan database dengan file index.php, copy script di bawah ini

<?php

$server = "localhost";
$username = "dumet";
$password = "school";
$db = "search";

$connect = mysqli_connect($server,$username,$password,$db);

if(!$connect){
    die("Connection Failed : ".mysqli_connect_error());
}


?>

<?php

$server = "localhost";

$username = "dumet";

$password = "school";

$db = "search";

$connect = mysqli_connect($server,$username,$password,$db);

if(!$connect){

die("Connection Failed : ".mysqli_connect_error());

}

Save dengan nama connect.php, kemudian kita rubah file index.php nya seperti script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var pencarian = [
      <?php 
        include "connect.php"; 
        $query = mysqli_query($connect,"SELECT * FROM pencarian");
      ?>
      <?php while($row = mysqli_fetch_array($query)){ ?>
        <?php echo '"'.$row["title"].'",'; ?>
      <?php } ?>
      ];

      $( "#cari" ).autocomplete({
        source: pencarian
      });
    });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="cari">Cari </label>
  <input id="cari">
</div>
</body>
</html>

<!doctype html>

<head>

<title>jQuery UI Autocomplete</title>

$( function() {

var pencarian = [

<?php

include "connect.php";

$query = mysqli_query($connect,"SELECT * FROM pencarian");

<?php while($row = mysqli_fetch_array($query)){ ?>

<?php echo '"'.$row["title"].'",'; ?>

<?php } ?>

];

$( "#cari" ).autocomplete({

source: pencarian

});

</script>

</head>

<body>

</div>

</body>

</html>

Yang kita rubah adalah pemanggilan nama dari database yang kita kolaborasikan dengan Jquery UI

Menjadi

Jika sudah, save dan refresh pada browser nya. Maka form search berhasil diberikan fungsi Auto Complete yang kita gabungkan dengan PHP, ketika kita ketikkan text pada form search maka otomatis akan menyamakan yang ada pada database yang tadi kita buat. Sangat mudah bukan, oke cukup sekian dulu pada artikel ini tentang Kolaborasi Auto Complete Jquery UI dan PHP

Semoga bermanfaat, terimakasih dan sampai jumpa.

Indahnya berbagi ilmu 🙂

Kolaborasi Auto Complete Jquery UI dan PHP

Facebook DUMET School

Konsultasi Gratis

Categories