Halaman

Senin, 10 Desember 2012

Membuat Autocomplete Value-Label jQuery, PHP, MySQL

Tutorial saya ini merupakan kelanjutan dari artikel saya yang sebelumnya yang berjudul Membuat Autocomplete Menggunakan jQuery, PHP, MySQL. Perbedaan artikel ini dengan yang sebelumnya adalah penggunaan fitur Autocomplete menggunakan pasangan value-label yang dapat menampilkan dua nilai (atau lebih) dan menggunakan file PHP yang terpisah untuk mendapatkan datanya dari database MySQL.

Jadi misalnya suatu kota memiliki jumlah populasi tertentu. Value diset untuk menampung jumlah populasi sedangkan label diset untuk menampung nama kota dan populasinya. Hasil akhirnya adalah saat suatu nama kota dan populasinya yang diambil secara dinamis dari database dipilih, elemen textbox hanya akan menerima nilai valuenya saja yakni jumlah populasinya saja. Gambar berikut menjelaskan apa yang telah saya terangkan:

Autocomplete value-label dengan jQuery, PHP, MySQL
Autocomplete value-label dengan jQuery, PHP, MySQL


Menjalankan jQuery UI Autocomplete Melalui Event KeyUp
Event keyup diaktifkan saat tombol keyboard dilepas setelah ditekan. Event keyup ini berguna untuk mengeksekusi autocomplete dalam mengambil data melalui file PHP. Di dalam file PHP ini berisi kode untuk mengambil data dari database dengan kata kunci tertentu. Berikut potongan kode JavaScript (jQuery) untuk keperluan ini:
<script>
  $(document).ready(function() {
    $("#txtNamaKota").keyup(function() {
      $("#txtNamaKota").autocomplete({
        source: "get-data-kota.php?namaKota="+$("#txtNamaKota").val()
      });
    });
  });
</script>

Parameter namaKota digunakan untuk keperluan seleksi nama kota yang nantinya dipakai untuk keperluan query SELECT menggunakan statemen LIKE.

Mengambil Sekumpulan Data Melalui File PHP
Atribut atau property source pada kode JavaScript di atas mengacu pada sebuah file PHP. Ini berarti file PHP tersebut digunakan sebagai sumber data untuk fitur autocomplete-nya. Oleh karena itu file get-data-kota.php perlu dibuat untuk mengambil sekumpulan data dari database.

Pada contoh kode berikut, saya menggunakan metode query menggunakan PDO (PHP Data Object). Database berasal dari contoh database World yang disediakan oleh website MySQL. Untuk lebih jelasnya lihat kode berikut:
<?php
  require_once "koneksi.php";
  $sql = "SELECT Name, Population FROM City WHERE Name LIKE ?";
  $arrData = array();
  
  try {
    $query = $koneksi->prepare($sql);
    $query->execute(array($_REQUEST["namaKota"].'%'));
    while($data = $query->fetch()) {
      $arrData[] = array("value" => $data["Population"], 
                         "label" => $data["Name"]." (".$data["Population"].")");
    }
  }
  catch (PDOException $e) {
    echo $e->getMessage();
  }
  
  echo json_encode($arrData);
?>

Pada SQL-nya saya menuliskan perintah query sederhana yakni mengambil nama kota (Name) dan populasinya (Population). Pada bagian akhir SQL-nya terdapat tanda tanya (?). Tanda tanya tersebut merupakan penanda prepared statement yang dipakai untuk menghindari SQL Injection. Data masukan, dalam hal ini $_REQUEST["namaKota"] tidak langsung dimasukan ke dalam perintah query-nya tapi secara tidak langsung melalui argumen dari method PDO->execute() dalam bentuk variabel array.

Selanjutnya perlu dibuatkan variabel array $arrData. Variabel array ini menyimpan kumpulan associative array (value-label). Nama associative array inilah yang nanti dipakai oleh jQuery UI Autocomplete untuk mendapatkan data label dan value seperti yang terlihat pada gambar di atas. Demikian semoga bermanfaat.

© 2012 husnanlabs.blogspot.com

12 komentar:

  1. itu prepare dari baris $query = $koneksi->prepare($sql); apaan ya ?

    BalasHapus
  2. Method prepare() dipakai untuk mempersiapkan eksekusi perintah SQL dan hasilnya berupa tipe data object yang dimasukan ke variabel $query. Variabel $koneksi didefinisikan di dalam file koneksi.php. Variabel $koneksi ini merupakan objek dari kelas PDO yang memiliki bentuk konstruktor:
    $koneksi = new PDO("mysql:dbname=world;host=localhost", "username", "password");
    Selengkapnya lihat PDO->prepare()

    BalasHapus
  3. Mau tanya, kalo semisal saya punya tabel di database bernama "barang" yang di dalam nya terdapat entiti "nama" dan "harga" , lalu saya membuat 1 form PHP yang mempunyai 1 "SELECT OPTION" (semacam kayak list box untuk memilih sesuatu) dan 1 textbox. List box berisi nama barang di database, textbox 2=harga. Bagaimana caranya menampilkan harga pada textbox harga secara otomatis sesuai dengan nama barang yang saya klik.Apakah itu menggunakan semacam ajax?
    Terima kasih mas.

    BalasHapus
    Balasan
    1. Dengan menggunakan jQuery kamu bisa menyalin nilai terpilihnya dengan sintaks:
      $("#listbox").change(function(){
      $("#textbox").val($(this).val());
      });

      Hapus
  4. maaf mas kalo hasilnya seperti ini
    Fatal error: Call to a member function prepare()
    ini kenapa yh

    BalasHapus
    Balasan
    1. pastikan definisi untuk objek $koneksi sudah dibuat melalui pelampiran file require_once "koneksi.php". Selengkapnya lihat PDO Prepare()

      Hapus
  5. gan ...maaf mau nanya neh kasih saran bila mana tampilan pilihan nya yaitu nama kota ...tapi value yg di ambil ada lah id dari nama kota tersebut ...dan dimasukan dalam sql ...itu gimn bentuk nya gan

    BalasHapus
    Balasan
    1. tinggal ubah statement sql-nya agar id kota juga diambil. Lalu masukan nilai id-nya ke dalam valuenya associative array dan nama kotanya ke label associative arraynya.

      Hapus
  6. kalau saya mau menggunakan autocomplete ini di 2 textbox berbeda gmn yah mas? jadi ada 2 textbox yang autocompletenya sama misalnya sama2 negara. sedangkan autocomplete dgn jquery menggunakan "#" sebagai pengenal. makasi

    BalasHapus
  7. Maaf mas boss, kebetulan newbie banget nich.... kalo Ane punya contoh kasus begini:
    TextNPM, TextNama, ComboSPP_ThnAkdmik, ComboSPP_Semester, TxtTglBayar
    1. ketik NPM (TextNPM), pada digit ke 3 sudah muncul value Nama. Jika dipilih salahsatu nama, TextNPM dan TextNama terisi.
    2. ComboSPP_ThnAkdmik, ComboSPP_Semester, value list nya dari hasil dari query NPM.
    3. dua combo tersebut terisi, maka pada TextTanggal juga otomatis terisi.
    segitu aja boss. Makasih sebelumnya

    BalasHapus
  8. Mau tanya mas, itu yang script untuk keyup-nya ditaruh dimana? Terus untuk htmlnya seperti apa? Mohon Pencerahan terima kasih.

    BalasHapus