Ajax ile otomatik önerme

22 / Haziran / 2008 Author

İsa Engiz

ajax

ajax

3 Yorum Yapilmis.

Ajax’ın bu kadar sevilmesinin ardındaki sebeplerden biri, kullanıcı ile etkileşimi artırmasıdır. Bu etkileşimi artırma yollarından biri de form alanlarının kullanıcının girdiği değerlere göre öneriler sunmasıdır.

Biz de bu yazımızda böyle bir uygulamanın nasıl yapılacağı üzerine tartışacağız. Uygulamanın canlı haline buradan göz atabilir ya da dosyaları buradan indirebilirsiniz.

HTML

İlk önce otomatik önermenin gerçekleşeceği form alanını tanımlıyoruz:

<form method="get" action="">
<label for="testinput">Kişi İsmi</label>
<input style="width: 200px" type="text" id="testinput" value="" />
<input type="submit" value="Gönder" />
</form>

Görüldüğü gibi, bu form alanınında extra bir özellik yok, normal bir form alanı.

Javascript

Otomatik önermeyi gerçekleştirecek asıl iş, dokümana ekleyeceğimiz javascipt kodları. Biz, burada daha önce yazılmış olan bir kütüphaneyi kullanacağız. Kütüphaneyi hazırlayan kişinin sayfasına buradan ulaşabilirsiniz.

İlk önce kütüphaneyi dökümanımıza ekliyoruz:

<script type="text/javascript" src="js/bsn.AutoSuggest_c_2.0.js">
</script>

Otomatik önermenin mantığı şu şekilde işliyor, kullanıcı form alanına odaklanmış iken klavyeden bir harfe bastığında bu harf ajax tekniği ile bir php dosyasına gönderiliyor ve bu php dosyası da o harfle başlayan isimleri dokümana geri dönüyor.

Kullandığımız bu kütüphane ise php dosyasından geri dönen bilgilerin json Ya da xml formatında olmasına izin vermekte. Biz burada json formatında dönen bilgilerin Doküman tarafından nasıl alınacağına bakalım.

Bunun için dökümana şu javascript kodunu da ekliyoruz:

<script type="text/javascript">
	var options = {
		script:"test.php?json=true&",
		varname:"input",
		json:true,
		callback: function (obj) { document.getElementById('testid').value = obj.id; }
	};
	var as_json = new AutoSuggest('testinput', options);
 
</script>

php dosyası

Yukarıdaki koddla görüldüğü üzere işlemi gerçekleştiren php dosyasının ismi “test.php” Bu dosyanın içeriğine, kodları indirip bakabilirsiniz.

Kişiselleştirme

Artık form alanımızda bir otomatik önerme seçeneği bulunmakta. Ancak otomatik önerme alanının rengini veya görünüşünü değiştirmek isteyebilirsiniz. Bunun için yapmanız gereken css dosyasında bazı alanların değerlerini değiştirmeniz. Arkaplan rengini veya harf renklerini değiştirerek kendi tasarımınıza adapte edebilirsiniz. Ben, Orijinal css dosyasında bulunan değerleri ve resim alanlarını değiştirerek biraz daha gmail renklerine yaklaştırdım. Siz de istediğiniz renk uyumunu css dosyasını değiştirerek verebilirsiniz.

Sonuç

Ajax ile otomatik önerme için pek çok hazır kütüphane bulunmakta. Ancak kimisinde kurulum için çok fazla uğraşmanız gerekmekte, kimisi ise beklendiği gibi çalışmayabiliyor. Burada kullandığımız kütüphanenin özelliği ise geri dönen verileri hem xml hem json olarak işleyebilmesi. Hangi formatta döneceğini ise küçük bir kod ile belirtebiliyorsunuz.

Uygulamanın canlı haline buradan göz atabilir, dosyaları buradan indirebilir veya hazır kütüphanenin sayfasına buradan gidebilirisiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!