Jquery - Php Otomatik Arama Tamamlama
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery - Php Otomatik Arama Tamamlama

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(6743)
RAPOR ET
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




viper_aykiri
viper_aykiri 2 Yıl Önce Cevaplandı
paylaşımınız için teşekkürler ama şöyle bir sorun var

merhaba dünya

sözcüğünü aradığımızı düşünün, sonucu bulduktan sonra kelimeler divini temizliyor buraya kadar her şey güzel ama

merhaba dünya ek veri

gibi ek bir veri var ise tekrar arama yapıyor. Acaba bir kez arama yaptıktan sonra inputa yeni bir harf girmeden arama yapmasını engelleyemez miyiz?

İyi günler...
cArleone
cArleone 2 Yıl Önce Cevaplandı
@viper_aykiri eğer aramayı bir butona bağlarsan olabilir.arama yaptığında veriyi bir değişkene ataya bilirsin.Her aramadan önce de indexOf() ile de inputtaki veri son değişkendeki ile aynımı diye kontrol edebilirsin.Yukarıdaki sistemde biraz sıkıntı çıkarır.Çünkü sürekli yeni bir harf girdiğinde arama yapıyoruz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol