Php ve Mysql ile Canlı Arama Ajax Live Search Yapımı
Merhablar bu yazımızda php ile canlı arama nasıl yapılır ona bakacağız. İnternette bir çok kaynak olmasına rağmen ben sizler için en basit ve anlaşılacak şekilde derledim. Şimdi birlikte php ve mysql ile canlı arama nasıl yapılır ona bakalım.
index.php
Arama ekranın olacağı dosyadır.
<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 = 'şifre';
$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;
}Tüm işlemler bukadar veri tabanınınzdan artık istediğiniz tablodan canlı aramayı gerçekleştirebilirsiniz.
