"Enter"a basıp içeriğe geçin

Php & Mysql ile Canlı Arama Ajax Live Search Yapımı

Merhaba Arkadaşlar,

Php ile Mysql veri tabanında canlı ama daha çok kullanılan adıyla live search yapmayı anlatacağım. İnternette bulabileceğiniz bir çok kaynak var tabi ama ben oldukça basit ve yalın olarak anlatmaya çalıştım. Daha basitleştirilmiş ve daha pratik kullanabileceğinizi düşünüyorum.

Ben otomobil markaları konusunda canlı arama yapabileceğiniz bir sistem hazırladım. Sizlerde farklı veri tabanı tabloları oluşturarak farklı aramalar yaptırabilirsiniz.

Öncelikle güzel ve düzenli bir arayüz olmasını istediğim için Bootstrap 4 kütüphanesini kullandım.

Sırasıyla kodlarımıza geçelim.

index.php
Arama ekranın olacağı dosyadır.

live-search.php
Bu dosya ise Ajax aracılığı ile kullanıcının girdiği terimi veri tabanında arayan ve sonuçları listeleyen dosyamızdır.

 

css/style.css
Stil dosyamız sadece demo görünümü için kullanılıyor. css dizini altına eklemelisiniz.

db_livesearch SQL dosyamız

Demo | Github

6 Yorum

  1. Hakan ARAS Hakan ARAS

    Merhaba
    Gayet güzel çalışıyor.
    Fakat tek tablo yerine çok tablodan ve her veriye link verilmesi gerektiğinde nasıl yapılabilir.
    Örneğin brands / model diye iki tablo var.
    Arama sonucu model geldi diyelim. Link nasıl verilir?

    • borasahin borasahin

      Merhaba,

      live-search.php de 21 – 22 satır kontrol sağlıyor bunları çoğaltın birisi brands birisi models tablosunu kontrol etsin 24 – 30 arasındaki if func içindekileri de aynı şekilde çoğaltın tek yapmanız gereken while gelen gelen verileri örneğin data olarak bir array oluşturup onun içine doldurun data arrayin dolu bir değere sahip olup olmadığını kontrol ettirip foreach ile ekrana bastırın.

  2. ayvaz ayvaz

    merhabalar,

    paylaşım ıcın tesekkurler. ceklen dataya link nasıl ekleyebiliriz. ?

    • borasahin borasahin

      Merhaba, live-search.php dosyasında 28. satırda a href=”#” olarak bağlantınızı ekleyebilirsiniz.

  3. Burhan DEMRCİ Burhan DEMRCİ

    Merhabalar,
    Bben arama kutusunda çıkan terime tıklayınca onunla ilgili aşağıdaki boşluğa bir açıklama yazmasını istiyorum. Sözlük mantığında yani. Bu konuda yardımcı olabilir misiniz. Kodlarda nasıl bir değişiklik yapmam lazım? Teşekkürler.

    • borasahin borasahin

      live-search.php dosyasında 28. satır arama sonucunda ekrana gelen listeyi basıyor. li bir jQuery func. hazırlayıp oraya bağlayın li onclick=”veriDetay(id)” gibi tıkladığınız da $.post ile veriyi gönderip okuyabileceğiniz bir read.php oluşurun oradan gelen sonucuda arama kutusunun altına bir div oluşturu içine yazdırabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir