Cara Membuat Auto Complete Seacrh Dengan Jquery UI

Sering kita jumpai sebuah input pencarian atau search pada sebuah website, seperti contoh form input search pada google. Ketika kita ketikkan text, otomatis form input akan ada pilihan di bawah nya. Nah kali ini saya akan memberikan tips dan trik tentang Cara Membuat Auto Complete Seacrh Dengan Jquery UI sederhana, dimana kita buat sebuah form kemudian kita berikan fungsi Jquery UI nya. Demo gambar nya seperti gambar di bawah ini

Nah seperti yang kalian lihat pada gambar di atas ini, begitu saya ketikkan huruf a maka Auto Complete akan membaca isi inputan yang dijalankan oleh Jquery. Baik, sekarang kita akan implementasikan Cara Membuat Auto Complete Seacrh Dengan Jquery UI. Seperti biasa teman-teman siapkan text editornya, kemudian copy script html nya di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Auto Complete</title>
</head>
<body>
  <div class="ui-widget">
    <label for="Cari">Cari: </label>
    <input id="Cari">
  </div>
</body>
</html>

Kemudian paste pada text editornya dan save dengan index.html, lalu jalankan pada browsernya. Maka hasilnya seperti gambar di bawah ini

Langkah berikutnya kita berikan fungsi Jquery UI nya untuk memberikan Auto Complete, teman-teman berikan library Jquery UI nya di dalam tag <head> atau bisa copy script di bawah ini

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

Kemudian kita berikan nama-nama untuk Auto Complete nya, disini saya memberikan nama-nama elektronik seperti gambar di bawah ini, teman-teman bebas memberikan nama apa saja

Lalu kita buat variabel nya untuk kita hubungkan dengan input

<script>
  $( function() {
    var pencarian = [
      "Laptop",
      "Hanphone",
      "Monitor",
      "TV",
      "AC",
      "Playstation",
      "Blender",
      "USB",
      "VGA",
      "RAM",
      "Keyboard"
    ];
    $( "#Cari" ).autocomplete({
      source: pencarian
    });
  } );
  </script>

Jika sudah, save dan refresh pada browsernya kemudian inputkan text apa saja pada kotak pencarian. Maka Auto Complete akan filter hurufnya jika ada maka otomatis akan muncul nama-nama elektronik yang saya buat tadi tetapi jika tidak ada Auto Complete tidak akan menampilkannya.

Sangat mudah bukan…

Baik, cukup sekian pada tutorial Dumet School tentang Cara Membuat Auto Complete Seacrh Dengan Jquery UI kita berjumpa lagi di tutorial berikut nya di www.kursuswebprogramming.com yaitu kita akan belajar Kolaborasi Auto Complete Jquery UI dan PHP

Terima Kasih dan Sampai Jumpa.

Semoga bermanfaat 🙂

Cara Membuat Auto Complete Seacrh Dengan Jquery UI

Kategori