Published May 12, 2020 by RIT with 0 comment

PENCARIAN DATA DENGAN PHP DAN DATABASE BAGIAN KE 2

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

cara membuat kotak pencarian dengan ajax dengan php dari database
live searching with ajax jquery



pada postingan sebelumnya adalah menampilkan data dengan dengan user memasukkan kata atau kalimat ke dalam kolom maka akan tampil data yg dicari, untuk postingan kali ini kita menambahkn 4 kolom yaitu : id, name, username,email. Saat user memasukkan kata, program menampilkan isi data dari database seperti postingan sebelumnya, namun setelah menampilkan data, saat user klik data yg di inginkan, maka kolom yg yg kosong akan terisi otomatis. 


pertama-tama buat lah table dengan nama users, dengan strutur seperti gambar di bawah ini



0 - download dulu plugin jquery ui (isi nya jquery.ui.css dan jquery.ui.js) di sini scroll hingga kebawah lalu tekan tombol download.
1 - letakkan jquery ui yg telah didownload folder dalam satu folder.
2 - buatlah file index.php
3 - buat file lagi dengan nama cari_proses.php
4 - copy script dibawah ini sesuaikan dengan file index.php dan cari_proses.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html>
<head>
    <title>Langsung Koding</title>
     
    <!-- jQuery -->
    <script src='jquery.min.js' type='text/javascript'></script>
 
    <!-- jQuery UI -->
    <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
    <script src='jquery-ui.min.js' type='text/javascript'></script>
     
</head>
<body>
 
    Nama : 
    <input type='text' class='nama_user'> <br><br>
 
    Id     :
    <input type='text' class='id_user'> <br><br>
            
    Email:
    <input type='text' class='email_user'><br><br>
 
    Username :
    <input type='text' class='username'><br><br>
 
</body>
</html>
    <!-- Script -->
<script type='text/javascript' >
    $( function() {
   
        $( ".nama_user" ).autocomplete({
            source: function( request, response ) {
                 
                $.ajax({
                    url: "fetchData.php",
                    type: 'post',
                    dataType: "json",
                    data: {
                        cari: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            select: function (event, ui) {
                $('.nama_user').val(ui.item.label); // menampilkan data dari inputan
                $('.id_user').val(ui.item.isi_id); // menyimpan id yg telah terpilih sesuai dengan
                $('.email_user').val(ui.item.isi_email);
                $('.username').val(ui.item.isi_username);
                 
                return false;
            }
        });
    });
 
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
 
</script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php 
 
include "koneksi.php";
 
if(isset($_POST['cari'])){
    $cari = $_POST['cari'];
 
    $query = "SELECT * FROM users WHERE name like'%".$cari."%'";
    $result = mysqli_query($con,$query);
     
    while($row = mysqli_fetch_array($result) ){
        $response[] = array(
                             
                            "label"=>$row['name'],
                            "isi_id"=>$row['id'],
                            "isi_email"=>$row['email'],
                            "isi_username"=>$row['username']
                            );
    }
 
    echo json_encode($response);
}
 
exit;

setelah user klik nama yg diinginkan maka kolom yang yang kosong akan terisi otomatis


Terima Kasih
Thank's

TAG TAGS :
cara membuat kotak pencarian data dari database dengan ajax | cara pencarian dengan ajax php dan mysqli | kotak pencarian data dengan ajax di php | pencarian Data dengan table dari Database dengan AJAX jQuery | PENCARIAN DATA DENGAN AJAX PHP DAN DATABASE BAGIAN KE 2 | AUTOMPELETE WITH JQUERY UI | HOW TO AUTOCOMPLETE DATA JQUERY |


BACA JUGA :


,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)