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.
Komentar
Posting Komentar