PHP ve Jquery ile Google suggest benzeri AutoComplete | Otomatik Metin Tamamlama Hazırlamak

Bazi web siteleri kendi arama motorlarında kullanıcıya yardımcı olmak amacıyla otomatik metin tamamlama scripti kullanıyorlar. Arama kutusuna bir kaç harf yazdığınızda arama kutusunun hemen altında dinamik açılan bir kutuda size arama önerilerinde bulunuyor. Böylece kullanıcı arama yapmakta zorlanmıyor. Bu yazımda size kendi yazdığım, PHP ile örneklediğim Google suggest benzeri AutoComplete | otomatik metin tamamlama scriptini nasıl kullacağımızı anlattım. Ajax kullanacağımız AutoComplete | Otomatik Metin Tamamlama scriptini JSON veri tipini kullanarak yapacağız.

AutoComplete | Otomatik Metin Tamamlama scriptinin kullanıma hazırlanması

Uygulamanın kullanıcı tarafında kullancağımız scripti jquery ile yaptım. JavaScript dosyasının ismi auto_complete.js . Uygulamanın çalışır haline buradan , dosyalara buradan ulaşabilirsiniz. Uygulamanin çalışır hali:

PHP-Jquery-Google-suggest-benzeri-AutoComplete-Otomatik-Metin-Tamamlama-Hazirlamak

Şimdi scripti kullacağımız sayfanın html head etiketleri arasına aşağıdaki javascript ve css dosyalarını sayfaya dahil edelim:
<script src="jquery-1.3.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="auto_complete_theme.css"/>	
<script >
// kelime önerilerinin anlınacağı php sayfasını bu global değişkene kaydetmemiz gerekiyor.
// Benim gösterdiğim örnekte bu arama_oneri.php
var arama_sayfasi= "arama_oneri.php";
</script>
<script src="auto_complete.js">
</script>
Sayfaya Jquery scritptini ve css dosyasını dahil ettikten sonra sayfanın body kısmına ekleyeceğimiz arama formunu aşağıdaki gibi ekleyelim:
<form id="arama_form"  action="yonlendirilecek_sayfa_buraya" method="get" >
	<input autocomplete="off" type="test" name="arama" id="arama"  >
	<button value="submit" type="submit" text="button" > submit </button>
	<div id="oneriler" class="oneriler" >
	</div>
</form>

AutoComplete | Otomatik Metin Tamamlama uygulamasının Sunucu tararlı kodun hazırlanması

Tamamlanacak metinleri ve sonuç sayısını alacağımız php scriptini yazmamız gerekiyor. Javascript dosyasında JSON verisi ile ajax isteği yapılacağı için PHP scriptinde verileri JSON formatında yollamamız gerekiyor. Aslında burada tek yapacağımız verileri json formatında yollamak o kadar. Tabii yollanacak JSON verisinin Jquery scriptinde( auto_complete.js ) algılanması için şu çıktıya benzer bir şekilde bir Json çıktısı yollamamız gerek:

PHP-Jquery-Google-suggest-benzeri-AutoComplete-Otomatik-Metin-Tamamlama-Hazirlamak

Bu çıktıyı verecek PHP sayfamız aşağıdaki gibi olacak:
// PHP ve Jquery ile Google suggest benzeri AutoComplete 
// | Otomatik Metin Tamamlama Hazırlamak

// arama formundan gonderilen kelimeyi GET metodu ile alıyoruz (tabii set edilmişse).
if (isset($_GET['kelime']))
{	$aranan=trim($_GET['kelime']);

	// kelime hecelerle eşleştirme yapılarak eşleşen 
	// heceye göre bir çıktı gönderiyoruz istemciye.

	if ( $aranan=="a")
	{
		$a=array( "as"=> "5", "asa" => "2","asalak"=> "1", "asık" => "4"
		,"aslan"=> "6", "atıl" => "3" ,"atılım" =>"7", "az" => "2"  ); 
		echo json_encode($a);
	}

	else if ( $aranan=="as")
	{
		$as=array("as"=> "5", "asa" => "2","asalak"=> "1", 
		"asık" => "4" ,"aslan"=> "6" ); 
		echo json_encode($as);
	}
}
Kullanıcı arama kutusunu her harf girdiğinde bu PHP sayfasına Ajax isteğinde bulunacak ve sayfadan dönen Json verisini düzenleyip önerileri düzenli bir şekilde kullanıcıya gösterecek. Biz bu örnekte sadece "a" ve "as" ile başlayan kelimeler için öneri gönderiyoruz. Gerçek bir uygulamada tabii böyle olmayacaktır. Gerçekte ya arama önerilerini ve sonuç sayısını daha önceden bir tabloya kaydedecek, daha sonra o tablodan verileri çekerek gelen metne göre eşleştirme yapacak ve yine bu Json formatında veriyi yollayacaksınız ya da direk veritabanında arama yapacaksınız. Mesela aşağıdaki komutla hem 'a' ile başlayan ürünleri hem de kaç tane bulunduğunu bulabilirsiniz:

"SELECT urun_basligi, COUNT(urun_basligi) AS sonuc_sayisi FROM urunler WHERE urun_basligi LIKE 'a%' group by urun_basligi"

Bir de arama formun yollanacağı bir PHP dosyamızın olması gerekiyor. Formu get metodu ile yollayacağımız için aranan kelimeyi $_GET['arama'] ile alabiliriz. Bu kısmı size bırakıyorum. Uygulamayı kendi projenize uygulamanız için sunucu tarafında Json verisini nasıl oluşturacağınıza siz karar vermelisiniz.
yazan Zülküf Küçüközer tarih   10th September 2009
primary key words  Jquery | Php | Otomatik tamamlama | Google okunma  31107
secondary key words  Auto complete | Arama onerisi | Script
writing hasan writing 29th March 2010
Merhaba Zülküf bey! Bu arama motorunu xml yani blogger gibi sayfalara uyarlanabilirmi? ve nasil yapabiliriz? yardimci olursaniz cok sevinirim tesekkurler!
writing Zülküf Küçüközer writing 2nd April 2010
Blogger kullanmadığım için kesin bir şey söyleyemeyeceğim ama http://www.google.com/support/blogger/bin/answer.py?answer=42347&&hl=en bağlantısını incelemenizi öneririm.
writing cumali writing 7th March 2011
merhaba Zülküf bey, çok güzel bir paylaşım. teşekkürler... peki ama Türkçe karakter sorununu nasıl aşabiliriz bu scriptte buna da bir çare olursa tam olur
writing Furkan writing 29th March 2011
türkçe karakter hatası için, tüm kodları notepad++ ile açıp utf8 bomsuz olarak çevirirseniz sorun kalmıyacaktır.
writing F?rat Gürsoy writing 3rd June 2011
normalde kolay kolay bloglara yorum yapmam ancak eklenti gerçekten etkileyici.. Teşekkürler..
writing Alihandro writing 31st July 2011
hocam gerçekten harika bir paylaşım,paylaşımınız için teşekkürler fakat girdigim arama verisini sql deki verilerle karşılaştırmam için nerelerde değişiklik yapmam gerektiğini anlayamadım.
writing Kaan writing 23rd August 2011
Anlatımınız çok sade ve güzel. Hemen örneği kendi projemde deneyeceğim. Teşekkürler.
writing erdem writing 13th September 2011
Peki gelen veriyi linke yönlendirebilir miyiz? {"Google":"http://www.google.com",vs.} Google otomatik tamamlanıp tıklanınca linke gidecek şekilde
writing furkan writing 5th May 2013
gelen veriyi linke yönlendirmek için basit php bilgisi yeterli