Live search menggunakan ajax dan php

Live search menggunakan ajax dan php

Live search atau pencarian langsung menggunakan javascript ajax dan php merupakan proses pencarian  yang dilakukan setiap kali menekan tombol pada keyboard tanpa harus menekan button pada halaman web agar proses live search ini berjalan kita dapat menggunakan ajax pada javascript baik itu javascript manual atau pun menggunakan jquery

membuat live search menggunakan ajax dan php

Pada tutorial kali ini pembasahan kita menggunakan javascript manual, namun sebelum itu saya sarankan untuk membaca terlebih dahulu mengenai pencarian data menggunakan php dan mysql karena kita akan menerapkan kembali apa yang telah kita pelajari dalam tutorial tersebut Di dalam tampil data menggunakan php kita telah membuat sebuah halaman index.php dimana didalam index.php tersebut terdapat source code seperti dibawah ini:

Source code diatas lah yang nantinya akan kita manipulasi menggunakan javascript, dan yang kita manipulasi adalah menghilangkan tombol cari dan menyembunyikan elemen span yang memiliki id alert selain itu juga nantinya kita akan manipulasi div dengan id tampil, yang nantinya akan kita isi dengan data hasil pencarian.
Dan pada pembahasan kali ini jika belum membuat file cari.php maka buat terlebih dahulu atau bagi yang sudah mengikuti tutorial mengikuti tutorial mengenai pencarian data menggunakan php ubah source code cari.php menjadi seperti dibawah ini:

dan yang terpenting kita buat dulu sebuah file dengan nama script.js dan isikan source code yang ada di bawah ini:

Penjelasan

Sedikit penjelasan, sebelum melakukan live search ini kita mengambil terlebih dahulu elemen html yang telah kita sebutkan diatas posting-an ini, untuk melakukan pengambilan elemen ini kita menggunakan atribut id dan cara mengambilnya ada pada bagian source code dibawah ini:

Dan bagian yang terpenting adalah fungsi untuk mengirim keyword pencarian yang di input-kan user sehingga live search nya berjalan, pada bagian ini setiap kata yang ditekan oleh user pada keyboard akan dikirim ke dalam cara.php dengan bantuan parameter keyword, dimana parameter keyword ini berisi value input-an user, kemudian elemen yang memiliki id tampil akan di ganti isi nya menjadi hasil pencarian tersebut, bagian source code yang dimaksud ada lah seperti dibawah ini:

Dan yang tidak kalah penting semua tutorial diatas tidak akan berfungsi sama sekali jika tidak kalian panggil script.js nya pada halaman index.php jadi, pada index.php tepat diatas </body> tambahkan source code dibawah ini:

Sekian tutorial mengenai live search menggunakan ajax dan php semoga bermanfaat dan jangan lupa untuk like fanspage facebook kami yang ada di sidebar untuk mengetahui update terbaru mengenai pemrograman web.

Posted in: php

2 Replies to “Live search menggunakan ajax dan php”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *