Langsung ke konten utama

Auto Complete With PHP SQL

Auto Complete With PHP SQL

Let's Go On CODE Now...

Yang Kamu Butuhkan hanya beberapa File saja
Index.php

<input type="text" placeholder="Country" id="country" name="country">
<div id="countries"></div>

Code di atas udah tau fungsinya kan? yak cuma untuk input sama keluar datanya saja.
Lalu lanjut ke Javascriptnya agar bisa Realtime datanya keluar.

<script>
    $(document).ready(function () {
        $("#country").keyup(function () {
            $.ajax({
                type:"POST",
                url:"country.php",
                data:'keyword='+$(this).val(),
                success:function (data) {
                    $("#countries").show();
                    $("#countries").html(data);
                }
            })
        })
    });
    function selectCountry(val) {
        $("#country").val(val);
        $("#countries").hide();
    }
</script>

Untuk Fungsi code di atas hanya membaca inputan lalu menyesuaikan data yang ada di database dengan File country.php
Oke Lanjut ke country.php nya aja.

country.php

<?php
$con=mysqli_connect('localhost','root','','autocomplete');
$keyword=$_POST['keyword'];if (!empty($keyword)){
    $query="SELECT country FROM countries WHERE country LIKE '%$keyword%' ORDER BY country LIMIT 0,6";
    $result=mysqli_query($con, $query);
    $count=mysqli_num_rows($result);
    if ($count < 1){
        echo"Sorry Your Country Is Nothing";
    }else{
        $alert="<div class='list-group'>";
        while ($row=mysqli_fetch_array($result)){
            $country=$row['country'];
            $alert.="<a onclick='selectCountry(\"$country\")'>$country</a>";
        }
        $alert.="</div>";
        echo $alert;
    }
}
?>



Untuk fungsinya yah udah kebaca dari code di atas ya, cuma buat ngambil data di database agar bisa di baca oleh Javascript yang tadi, lalu di munculkan.

Untuk Database di sesuaikan saja ya, untuk tutorial kali ini saya menggunakan database yang sederhana

Bagi yang mau download silahkan Klik Link dibawah.
http://zipansion.com/2wLyc

Komentar