AutoComplete JQuery dari MySQL dengan Dua Text Input

Bingung juga membuat judul untuk artikel kali ini, intinya artikel kali ini lanjutan dari artikel sebelumnya yaitu Autocomplete dari MySQL Di Textbox dengan JqueryUI, namun kali ini terdapat sedikit pengembangan berdasarkan pertanyaan mas tryco yang telah berkunjng ke blog ini.

Pengembangan yang dilakukan adalah melakukan pencarian dari autocomplete dan ketika dipilih mengisi ke komponen input lain, misal ketika memilih nama maka akan terisi secara otomasi nomor anggota atau alamat nya pada kotak input alamat atau lainnya.

Untuk jelasnya perhatikan gambar berikut :

auto_complete2_1

Ketika mengisi nama anggota, maka kotak sebelahnya akan terisi dengan nomor induk (lihat gambar)

auto_complete2_2

Bagaimana membuatnya ??

Berikut langkah-langkahnya :

  1. Buat Koneksi
  2. Buat fungsi untuk mengambil nama dan nomor dan mengubahnya menjadi array dalam javascript.auto_complete2_3
  3. Buat fungsi di Jquery untuk mengambil nama berdasarkan kunci dan mengambil value nomor ke kotak nomor anggota
    auto_complete2_4
  4. buat html menyediakan dua input boleh input boleh text area yang terpenting pada bagian id harus sama dengan yang diketik pada fungsi di langkah ke -3auto_complete2_5
  5. Jalankan, dan hasilnya akan tampak seperti gambar kedua diatas, pengembangannya bisa diganti dengan yang lain tidak hanya nomor misal alamat atau yang lainnya.

Untuk jelasnya silahkan download scrpt yang sudah jadi untuk dipelajari :

DOWNLOD

Post a Comment

Previous Post Next Post