Artık bir çok sitede bu özellik var.En başta da google.Bir harf gireriz otomatik tamamlar yada onu içerenler listelenir.İşte bu derste jquery ve php ile bunu yapacaz.
Önce mantığını anlatayım inputa girilen bir harf olduğunda inputun değerini ajaxla göndeririz. php de bunu alırız.veri tabanında aratır verileri ekrana basar ajax a yollamış oluruz.Daha sonra gelen veriyi o an sayfa gösteririz.
Kodlara geçelim
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnaSayfa</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function(){
$("#ara").keyup(function(){//inputta bir tuşa basılırsa
var kelime=$(this).val();//değerini al
$.post("ara.php",{"kelime":kelime},function(al){ //ara.php ye gönder
$(".kelimeler").html(al);//gelen verileri .kerlimeler clasına ait divin içine yaz
});
});
});
function tamamla(al){//tamamla fonsiyonu çağırılınca gönderilen veriyi al
$("#ara").val(al);//inputa koy
$(".kelimeler").text("");//kelimeler clasına ait divi temizle
}
</script>
<style type="text/css">
/*basit tasarım*/
.ana{width:175px;position:relative;margin:auto;}
#ara{width:150px;height:20px;position:absolute;left:0px;top:0px;}
.kelimeler{width:155px;position:absolute;left:0px;top:25px;}
.kelime{width:150px;height:25px;margin-bottom:1px;background-color:#f1f1f1;margin:auto;cursor:pointer;}
</style>
</head>
<body>
<div class="ana">
<input type="text" id="ara" />
<div class="kelimeler">
</div>
</div>
</body>
</html>
ara.php
<?php
$baglan=mysql_connect("localhost","root","") or die("mysql bağlantı hatası");
mysql_select_db("etiket",$baglan) or die("veri tabanı bağlantı hatası");//mysql bağlatısı
$aranacak=@$_POST["kelime"];//kelimeyi alıyoruz.
$al=mysql_query("SELECT * FROM etiketler WHERE isim LIKE '%$aranacak%' ORDER BY hit desc LIMIT 10 ");
//etiket tablosunda taratıyoruz bulunan verileri hiti yüksek olana göre sıralayıp ilk 5 i alıyoruz
while($yaz=mysql_fetch_array($al)){
echo "<div class='kelime' onClick='tamamla(\"".$yaz["isim"]."\")'>".$yaz["isim"]."</div>";
//verileri ekrana yazıyorum
}
?>
video :
indir : http://ustaderslik.com/dosya/otomatik%20tamamlama.rar
UstaDerslik
