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:
<form method="post" action="cari.php">
    <input type="text" name="cari" id="keyword" placeholder="Cari disini">
    <span id="alert" style="color: red;">Inputan tidak boleh kosong</span>
    <input type="submit" value="Cari" name="btnCari" id="btnCari">
</form>
<div id="tampil"></div>
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:
<button style="margin-left: 125px;"><a href="index.php">Kembali</a></button>
<table>
    <tr>
        <th>No</th>
        <th>Nim</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Asal Sekolah</th>
        <th>No Hp</th>
        <th>Action</th>
    </tr>
    <?php
        include 'config.php';
        if(isset($_GET['keyword'])){
            $key = $_GET['keyword'];
            $no = 1;
            $sql = mysql_query("SELECT * FROM data_mahasiswa WHERE nim LIKE '%$key%' OR nama LIKE '%$key%' OR alamat LIKE '%$key%' OR asal_sekolah LIKE '%$key%' OR no_hp LIKE '%$key%' ");
            if(mysql_num_rows($sql) >= 1){
                while ($data = mysql_fetch_array($sql)) {
                ?>
                    <tr>
                        <td><?=$no++?>.</td>
                        <td><?=$data['nim']?></td>
                        <td><?=$data['nama']?></td>
                        <td><?=$data['alamat']?></td>
                        <td><?=$data['asal_sekolah']?></td>
                        <td><?=$data['no_hp']?></td>
                        <td>
                            <a href="edit.php?nim=<?=$data['nim']?>">Edit</a>
                            <a onclick="return confirm('yakin untuk menghapus?');" href="hapus.php?nim=<?=$data['nim']?>">Hapus</a>
                        </td>
                    </tr>
                <?php
                }
            }else{
                ?>
                    <tr>
                        <td colspan="7" style="color: red">Data <?=$key;?> Not Found</td>
                    </tr>
                <?php
            }
        }
    ?>
</table>
dan yang terpenting kita buat dulu sebuah file dengan nama script.js dan isikan source code yang ada di bawah ini:
var btnCari = document.getElementById('btnCari');
var key = document.getElementById('keyword');
var alert = document.getElementById('alert');
alert.style.display = 'none';
key.addEventListener('mouseover', function() {
 btnCari.style.display = 'none';
 key.style.width = '100%';
});
key.addEventListener('mouseout', function() {
 if(key.value === '' )
 {
  key.style.width = '85%';
  alert.style.display = 'block';
 }
})
key.addEventListener('keyup', function() {
 if (key.value !== '')
 {
  alert.style.display = 'none';
 }
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   tampil.innerHTML = xhr.responseText;
  }
 }
 xhr.open('GET','cari.php?keyword=' + keyword.value ,true);
 xhr.send();
})
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:
var btnCari = document.getElementById('btnCari');
var key = document.getElementById('keyword');
var alert = document.getElementById('alert');
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:
key.addEventListener('keyup', function() {
 if (key.value !== '')
 {
  alert.style.display = 'none';
 }
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   tampil.innerHTML = xhr.responseText;
  }
 }
 xhr.open('GET','cari.php?keyword=' + keyword.value ,true);
 xhr.send();
})
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:
<script src="script.js"></script>
Sekian tutorial mengenai live search menggunakan ajax dan php semoga bermanfaat dan jangan lupa untuk selalu mengecek daftar isi serba ngoding atau like fanspage facebook kami yang ada di sidebar untuk mengetahui update terbaru mengenai pemrograman web.

0 Response to "Live search menggunakan ajax dan php"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel