Yeniden merhaba!
Bu yazımızda hepimiz bildiği auto search complete uygulaması için basit bir örnek yapacağız. Artık hemen hemen her web sayfasında görebileceğiniz türden yaygın olan bu uygulama, kullanıcıların site içerisinde arama yaparken işlerini oldukça kolaylaştırmaktadır. Kişi, arayacağı bilgiyi arama formuna yazarken, web sayfası otomatik olarak eşleştirme yaparak, aranmakta olan veriyi çabuk bir şekilde kullanıcıya sunmaktadır. Dolayısıyla user friendly (kullanıcı dostu) bir özelliği sayfamıza sunmuş olmaktayız.
Bu örnek uygulamayı yine Javascript dilinin en yaygın kütüphanesi olan JQuery ile yapacağız. Ben JQuery ‘i hayat kurtarıcı olarak tanımlıyorum. Zira kendi sloganı olan “The Write Less, Do More” ifadesi, JQuery ‘nin misyonunu bize açıkca anlanmaktadır.
Uygulamamız için 7 adet dosyaya ihtiyaç duymaktayız:
ID değeri “bekle” olan nesne, veriler yüklenirken kullanıcıya “lütfen bekleyiniz” gibi bir mesaj verilen alanı temsil ederken, bir yandan da arama sonuçlarını alıp ekrana yansıttığımız yerdir. ID değeri “kapat” olan nesne, gelen aramaları temizlemek için kullanılacaktır.
Yukarıdaki JQuery kodu, Ajax methodu kullanılarak veri.php ile index.php arasında bir köprü oluşturmaktadır. Kullanıcı girdisi,
satırı ile alınıp,
satırı ile de link olarak GET metoduyla gönderilmektedir. Tabi bu kod çok da kusursuz sayılmaz. JQuery bu tür işler için kendi parametrelerine değer atanması beklemektedir. Şöyle ki:
data ve method parametreleri işimizi oldukça kolaylaştıracaktır. Bu konu ile ilgili tüm bilgilere JQuery ‘nin resmi web sitesindeki docs kısmından ulaşabilirsiniz.
Yukarıdaki JQuery dosyasından gelen verileri, veritabanındaki verilerle eşleştirme işlemini ise PHP dosyası yapacaktır.
Böylece, kullanıcının arama form alanına girdiği veriyi, henüz yazmaya başladığı andan itibaren JQuery ajax metodu ile çekip PHP dosyaya yollayan auto search complete uygulaması hazırlanmıştır. Kullanıcı ekrana gelen arama sonuçlarını temizlemek için “Finish this searching!” butonuna basacaktır. Bu buton,
yukarıdaki kapat() fonksiyonuna bağlıdır. Stil dosyası olarak stil.css ise, arama sonuçlarının gösterileceği aşağıdaki stil bilgilerinden oluşmaktadır.
Bu örnek uygulamanın demo sayfasına bakıp incelemek için buraya tıklayabilirsiniz. Umarım işinize yarar bilgiler vermişizdir.
Not: Bu makale, tarafımdan http://stdioe.blogspot.com/2011/11/web-20-tech-and-jquery-application.html adresinde İngilizce dilinde de yayınlanmıştır.
My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com
Öncelikle uygulama için teşekkürler. Fakat 10000 veri girişi olan bir tabloda bu tip bir arama yapmak mysqli felç eder. Bunun sphinx ile çalışan bir örneğini yazarsanız performans açısından da çoğu kişinin işine yarayabileceğini düşünüyorum. İyi çalışmalar dilerim…
Öncelikle yorumunuz için teşekkürler.
Tabi dediğiniz gibi yukarıdaki örnek basit bir veritabanı için geçerli olacak, yüksek data barındıran bir veritabanı için sorun yaşatacaktır. Sphinx ile çalışan bir örneğini kısa süre içerisinde ekleyeceğim.
Katkınız için teşekkürler,
İyi çalışmalar.
Comment:*
Nickname*
E-mail*
Website
Bir dahaki sefere yorum yaptığımda kullanılmak üzere adımı, e-posta adresimi ve web site adresimi bu tarayıcıya kaydet.
+ altı = 13
CAPTCHA (Şahıs Denetim) Kodu *