Log Of Oyazhuryachna

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

15 thoughts on “AutoComplete JQuery dari MySQL dengan Dua Text Input

  • tryco says:

    Luar biasa sekali mas ini..pertanyaan saya langsung di respon..semoga amal ibadah mas sll di catat Allah..tambah rezekinya…dan di beri kesehatan sll..sukses sll

  • tryco says:

    mohon maaf mas oz klo saya tambahin text input lagi lebih dari dua textbox nya, kok ga bisa ya..mohon pencerahannya mas..

  • obat maag says:

    luar biasa, salut deh !!

  • freddty says:

    pak buat yang ke codeignter donk ?

  • yayan says:

    Terima kasih mas. Ilmunya sangan bermanfaat sekali. kalau untuk lebih dari 3 textbox yang dimaskud dengan pop up seperti apa mas?

  • dhan says:

    error download tutorial bang, ada URL baru

  • dody says:

    halo mas..tutornya sangat membantu sekali. ada masalah mungkin mas e bisa membantu.
    utk autocomplete dgn jml record dlm tabel itu jumlahnya sedikit bisa tampil. tapi pas saya coba dengan tabel yg jumlahnya sekitar 3000 record, autocompletenya tidak menampilkan satu data pun.
    apa memang autocomplete dibatasi dgn jumlah minimal sekian record gitu?
    atau bisa di maksimalkan jumlah recordnya?
    terimakasih

    • ozs says:

      ya mas…kl record udah ribuan pasti lemot.. prinsipnya ketika kita mengetik 1 karakter maka komputer melakukan pencarian secara live…tidak recomended untuk yang recordnya banyak..

Leave a Reply

Your email address will not be published. Required fields are marked *