JQuery ile Auto Search Complete Uygulaması

JQuery ile Auto Search Complete Uygulaması
Ekim 03 19:58 2012 Bu yazıyı yazdır

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:

  1. index.php (auto search complete uygulamasının ana sayfası olan arama yapılacak sayfa)
  2. ayarlar.php (veritabanı konfigürasyonlarının tanımlandığı sayfa)
  3. jquery.js (ajax methodu ile index.php ‘de refresh yapılmadan veri köprüsü yapılacan jquery sayfası)
  4. islem.php (jquery tarafından gönderilen verilerin işlenip kullanıcıya gönderilmek üzere değerlendirildiği sayfa)
  5. jquery.lib.js (index.php sayfasına include edilecek olan jquery kütüphane dosyası)<br>
  6. stil.css (arama esnasında islem.php sayfasından gelen verilerin gösterilecek DIV nesnesinin tanımlandığı CSS stil dosyası)
  7. javascript.js (yapılan aramaları temizlemek için kullanılacak olan “kapat” fonksiyonunu içeren javascript dosyası)

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.

  Yazı şöyle etiketlendi:
  Kategoriler:
A.Gökhan, M.Sc.
A.Gökhan, M.Sc.

My Name is A. Gokhan SATMAN, and I am a software engineer, Author and game developer. gokhansatman.com

Daha fazla yazı görüntüle
Yorum yaz

2 Yorum

  1. Yazılımcı
    Ocak 13, 17:07 #1 Yazılımcı

    Ö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…

    Reply to this comment
    • A.Gökhan
      Ocak 14, 00:56 A.Gökhan Author

      Ö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.

      Reply to this comment

Yorum ekle

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.

*