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.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.search-box input[type="text"]').on("keyup input", function(){
            /* Input Box'da değişiklik olursa aşağıdaki durumu çalıştırıyoruz. */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".liveresult");
            if(inputVal.length){
                $.get('live-search.php', {term: inputVal}).done(function(data){
                    /* Gelen sonucu ekrana yazdırıyoruz. */
                    resultDropdown.html(data);
                });
            }else{
                resultDropdown.empty();
            }
        });
        /* Sonuç listesinden üzerinde tıklanıp bir öğe seçilirse input box'a yazdırıyoruz. */
        $(document).on("click", ".liveresult li", function(){
            $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
            $(this).parent(".liveresult").empty();
        });
    });
    </script>
    <title>Php & Mysql ile Canlı Arama (Live Search)</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-12 search-box">
            <h4>Marka Arama</h4>
            <input type="text" class="form-control" autocomplete="off" placeholder="Marka Ara..." />
            <ul class="list-group liveresult"></ul>
          </div>
        </div>
      </div>
  </body>
</html>

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.

<?php
/* Database Bağlantısı */
$db_host = 'localhost';
$db_user = 'root';
$db_pass = 'root';
$db_database = 'db_livesearch'; 
$conn = @mysql_connect($db_host,$db_user,$db_pass);
    if(!$conn){
        die("Baglanti hatasi: ".mysql_error()); 
    }       
    $db_select = mysql_select_db($db_database,$conn);
    if(!$db_select){
        die("Veritabani hatasi: ".mysql_error());   
    }
    mysql_query("SET NAMES utf8");
    session_start();
/* Database Bağlantısı */
    if ($_REQUEST['term']) { // Bir terim gelip gelmediğini kontrol ediyoruz.
        $term = $_REQUEST['term']; // Gelen terimi değişkene atıyoruz.
        /* Gelen terim ile eşleşen kayıt olup olmadığını sorguluyoruz. */
        $check_query = mysql_query("SELECT * FROM brands WHERE name LIKE '%".$term."%'");
        $check_row = mysql_fetch_array($check_query);
        /* Gelen terim ile eşleşen kayıt olup olmadığını sorguluyoruz. */
        if ($check_row) { // Sorgulama sonucu dolu olursa eğer sonuçları ekrana basıyoruz.
            $query = mysql_query("SELECT * FROM brands WHERE name LIKE '%".$term."%'");
            while ($row = mysql_fetch_array($query)){
                $name = $row['name'];
                echo '<li class="list-group-item">'.$name.'</li>';
            }
        }else{
            // Eğer eşleşen kayıt yoksa alttaki uyarıyı ekrana basıyoruz.
            echo '<li class="list-group-item">Eşleşen kayıt bulunamadı.</li>';
        }
    }
?>

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

body,html{
	height: 100%;
	min-height: 100%;
	background: #005C97;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #363795, #005C97);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.search-box h4{
	color: #fff;
}
.search-box{
	margin-top: 20%;
}
/* Formatting result items */
.liveresult li{
	cursor: pointer;
}
.liveresult li:hover{
	background: #f2f2f2;
}

db_livesearch SQL dosyamız

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

# Dump of table brands
# ------------------------------------------------------------

DROP TABLE IF EXISTS `brands`;

CREATE TABLE `brands` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(120) CHARACTER SET utf8 COLLATE utf8_turkish_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

LOCK TABLES `brands` WRITE;
/*!40000 ALTER TABLE `brands` DISABLE KEYS */;

INSERT INTO `brands` (`id`, `name`)
VALUES
	(1,'Alfa Romeo'),
	(2,'Anadol'),
	(3,'Aston Martin'),
	(4,'Audi'),
	(5,'Bentley'),
	(6,'BMW'),
	(7,'Bugatti'),
	(8,'Buick'),
	(9,'Cadillac'),
	(10,'Chery'),
	(11,'Chevrolet'),
	(12,'Chrysler'),
	(13,'Citroen'),
	(14,'Dacia'),
	(15,'Daewoo'),
	(16,'Dodge'),
	(17,'Daihatsu'),
	(18,'Eagle'),
	(19,'Ferrari'),
	(20,'Fiat'),
	(21,'Ford'),
	(22,'Honda'),
	(23,'Geely'),
	(24,'Infiniti'),
	(25,'Hyundai'),
	(26,'Hennessey'),
	(27,'Kia'),
	(28,'Ikco'),
	(29,'Jaguar'),
	(30,'Lada'),
	(31,'Lancia'),
	(32,'Lexus'),
	(33,'Lamborghini'),
	(34,'Lotus'),
	(35,'Maserati'),
	(36,'Lincoln'),
	(37,'Mazda'),
	(38,'Mclaren'),
	(39,'Maybach'),
	(40,'MG'),
	(41,'Mercedes-Benz'),
	(42,'Mitsubishi'),
	(43,'Proton'),
	(44,'Rover'),
	(45,'Mini'),
	(46,'Nissan'),
	(47,'Moskwitsch'),
	(48,'Skoda'),
	(49,'Opel'),
	(50,'Peugeot'),
	(51,'Suzuki'),
	(52,'Pontiac'),
	(53,'Porsche'),
	(54,'Tofaş'),
	(55,'Renault'),
	(56,'Rolls-Royce'),
	(57,'Volvo'),
	(58,'Saab'),
	(59,'Seat'),
	(60,'Smart'),
	(61,'Subaru'),
	(62,'Toyota'),
	(63,'Tata'),
	(64,'Volkswagen'),
	(65,'DFM'),
	(66,'GMC'),
	(67,'Hummer'),
	(68,'Jeep'),
	(69,'Isuzu'),
	(70,'Land Rover'),
	(71,'Mahindra'),
	(72,'Mercury'),
	(73,'Ssangyong'),
	(74,'Askam'),
	(75,'BMC'),
	(76,'FAW'),
	(77,'Gaz'),
	(78,'Avia'),
	(79,'Daf'),
	(80,'HFKanuni'),
	(81,'Hino'),
	(82,'Iveco'),
	(83,'Jac'),
	(84,'Man'),
	(85,'Otokar'),
	(86,'Piaggio'),
	(87,'Samsung'),
	(88,'Scania');

/*!40000 ALTER TABLE `brands` ENABLE KEYS */;
UNLOCK TABLES;

/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Demo | Github

7 Yorum

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?

27 Ocak 2019
- 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.
  
  11 Aralık 2019
ayvaz

merhabalar,

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

25 Ağustos 2019
- borasahin
  
  Merhaba, live-search.php dosyasında 28. satırda a href=”#” olarak bağlantınızı ekleyebilirsiniz.
  
  11 Aralık 2019
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.

31 Ağustos 2019
- 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.
  
  11 Aralık 2019
Erdal Ataş

Burası aktif ise bu konunun sahibi ile görüşmek istiyorum. 0534 245 27 27 Ben bir tane şikayetçi scripti yazıyorum.
http://www.birsikayet.com

Burada aramayı akıllı arama yapmak istiyorum.

26 Kasım 2020

Bu yazı yorumlara kapalı, ama geri izlemeler ve pingback'ler açık.