CF AJAX vs Google Suggest :O
Gönderen : Candan Bilecen (3:57 PM)
3 yorum - Kategori : Coldfusion | Javascript | Ajax
Google Suggest :Yapılması gereken basit bir şey aslında kullanıcı TextBox’a her harf girişinde veritabanına bir sorgu göndererek o harfin, birkaç harften sonra kelimenin benzerlerinin veritabanında olup olmadığını varsa da bunların bir listesini TextBox’ımızın hemen altında göstericez.Kullanıcı listeden bir kelimenin üzerine geldiğinde o kelimeyi TextBox’ımızda göstericez. Eğer hiç benzer kelime yoksa o zaman listemizi saklıyıcaz gösterdiğimiz listeden seçim yapıldı ise listemizi tekrar gizliyicez belirlediğimiz bu kurallar doğrultusunda kodumuzu yazalım.. Normalde bu işlem veritabanını fazlasıyla yorucaktır yapılması gereken benzer kayıtlarnı 1 kez çekilip dizi üzerinden listelenmesidir.
Special Thanks Mr. Mahmut :)
İlk önce ara.cfm adında bir sayfa oluşturalım.
<html>
<head>
<cfajaximport>
<script>
function gizle()
{
ColdFusion.Window.hide("p2"); //penceremizi gizliyoruz
}
function goster()
{
ColdFusion.Window.show("p2"); //penceremizi gösteriyoruz.
}
function aktar(kelime)
{
if(kelime.length>0)
{
document.getElementById("ara").value = kelime; // öneriler.cfm den gelen veri varsa TextBoxımıza aktarıyoruz.
}
}
function formuGonder() {
ColdFusion.Ajax.submitForm('kelimeForm', 'oneriler.cfm', sonuc,
hata); // kelimeForm içerisindeki verileri öneriler.cfm sayfasına gönderip öneriler.cfm’den dönen verileri sonuc fonksiyonuna gönderiyoruz
}
function sonuc(text)
{
document.getElementById("sonuclar").innerHTML = text; //öneriler.cfm sayfasında yazan tüm bilgileri alıyoruz ve sonuclar isimli div'imize yazdırıyoruz bu divimiz p2 adlı cfwindow penceremizin içinde böylece önerilerimizi istediğimiz zaman gösterip gizleyebiliyoruz.
if(text.length>1) //eğer dönen bilgi uzunluğu 1den büyükse demekki önerilen kelimelerimiz var yani penceremizi gösterebiliriz.
goster();
else // 1'den büyük değilse demekki elimizde hiç önerimiz yok o zaman penceremizi gizliyoruz
gizle();
}
function hata(code, msg) // hata fonksiyonu
{
alert("Hata!!! " + code + ": " + msg);
}
</script>
</head>
<body>
<cfform name="kelimeForm">
<cfinput name="ara" type="text" onKeyUp="javascript:formuGonder();" ><!---Klavyeden her giriş yapıldığında veritabanımızda benzer veriler olup olmadığını kontrol ettiriyoruz--->
</cfform>
<cfwindow name="p2" title="Benzer Sonuçlar" closable="true" draggable="false" resizable="true" x=10 y=35 width="150" height="170">
<div id="sonuclar"></div><!---Her giriş yapıldıktan sonra eğer öneri var ise divimizin içine yazdırıyoruz.--->
</cfwindow>
<br><br><br><br><br><br><br><br><br><br><br>
<!---Kontrol edeceğimiz ad için ColdFusion içerisinde standart olarak bulunan cfArtGallery veritabanını kullanıyorum ve kontrol edebilmemiz için verileri listeliyorum --->
<cfdbinfo type="tables" datasource="cfartgallery" name="dbdata"><!---cfartgallery içersindeki tabloların adlarını alıyoruz--->
<cfquery name="artistler" datasource="cfArtGallery"><!---cfartgallery içersindeki artists tablosundaki verileri alıyoruz--->
select * from artists
</cfquery>
cfartgallery içersindeki tablo isimleri :
<br>
<cfdump var="#dbdata#">
<br>
artists tablosundaki veriler :
<br>
<cfdump var="#artistler#">
</body>
</html>
ara.cfm girilen veriyi sorgulaması için oneriler.cfm sayfasına gönderecek bu sayfada veritabanında sorgulamamızı yaptıktan sonra var olan verileri yeniden ara.cfm’e döndürücez.oneriler.cfm sayfamızı oluşturalım.
<!---Veritabanına sorguyu gönderdikten sonra veri olması halinde ilk 5 kaydı listeleyerek linkliyoruz.--->
<cfquery name="kelimeler" datasource="calisma">
select ad from tablo1 where ad like '%#form.ara#%'
</cfquery>
<cftry>
<cfif kelimeler.recordcount GT 0>
<cfloop query="kelimeler" endrow="5">
<a onClick="gizle();" onMouseOver="aktar('<cfoutput>#kelimeler.firstname#</cfoutput>');"><cfoutput>#kelimeler.firstname#</cfoutput></a><br>
</cfloop>
</cfif>
<cfcatch>
</cfcatch>
</cftry>
Artık Google Suggest benzeri sayfamız kullanıma hazır..
Mahmut Çifçi yazdı : 07/30/09 9:32 PM
Emeğinize sağlık,çok güzel bir örnek olmuş.