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:![]() Ş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:![]() 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. |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
Bloğumun Google PageRa ..
Büyük boyutlu tablolar ..
Mysql veritabanında Fu ..
PHP, Apache Url Rewrit ..
İlişkisel Veritabanı T ..
PHP ile JSON veri oluş ..
Cookie v.s. Session | ..
ASP.NET ve Google Ajax ..
ASP.NET'de Linq ve Lin ..
ASP.NET'de sunucu kont ..
Büyük boyutlu tablolar ..
Mysql veritabanında Fu ..
PHP, Apache Url Rewrit ..
İlişkisel Veritabanı T ..
PHP ile JSON veri oluş ..
Cookie v.s. Session | ..
ASP.NET ve Google Ajax ..
ASP.NET'de Linq ve Lin ..
ASP.NET'de sunucu kont ..
Etiketler
| Ajax | Apache | Dizin-içeriği | Dosya | Erişim | Flv | Geoip | Hesap | Http-api | Http-session | Ip | Javascript | Join-on | Jquery | Json | Kullanıcı | Lokasyon | Mesaj | Natural-join | Online-sms-gateway | Php | Tablo-birleştirme | Url-rewriting | Veritabanı | Web-projeleri | Web-sunucusu | Where-clause | Yorum | Ziyaretçi-bilgi |arama
Loading
sosyal




