PHP ve jQuery ile Anında Önizlemeli Arama Formu

PHP ve jQuery ile Anında Önizlemeli Arama Formu

sola ok  Programlama

20.06.2016

558 Gösterim

TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı

Google Gibi Anında Önizlemeli Arama Formu


Her webmaster, sahibi olduğu siteye, Google gibi anında önizlemeli, site içi arama motoru eklemek ister. Bunu PHP ve jQuery kullanarak yapmak mümkündür. Bunun için gerekli olan kodları aşağıda paylaştım. Kodlar içerisindeki kendi sitenize göre düzenlemeniz gereken, veri tabanı adı, şifresi gibi veri tabanı bağlantısını yapmanız gereken yerler vardır. Bu kısımları düzenledikten sonra sorunsuz bir şekilde Google tarzı anında önizlemeli arama motorunu sitenizde kullanabilirsiniz.


Kodlar


Aşağıdaki kodları, arama motorunun görünmesini istediğiniz sayfada/sayfalarda, <head> </head> etiketleri arasına kopyalayın.

<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sonuclar").hide();
// Tıklandığında işlem yapması için...
$(".input").keyup(function(){
// Girilen veriyi alma
var value = $(this).val();
var deger = "value="+value;
$.ajax({
type: "POST",
url: "islem.php",
data: deger,
success: function(cevap){
if(cevap == "yok"){
$("#sonuclar").show().html("");
$("#sonuclar").html("Hiçbir sonuç bulunamadı !");
}else if(cevap == "bos"){
$("#sonuclar").hide();
}else {
$("#sonuclar").show();
$("#sonuclar").html(cevap);
}
}
})
});
});
</script>

Daha sonra aşağıdaki kodları, aynı sayfada <body> </body> etiketleri arasına (arama motorunun sayfanın neresinde görünmesini istiyorsanız oraya) kopyalayın.

<div id="dis-div">
<input type="text" name="arama" class="input"/>
<div id="sonuclar"><ul></ul></div>
</div>

Sırada, önizleme işleminin gerçekleşeceği işlem sayfasını oluşturmak gerekiyor. Bunun için sitenizin bulunduğu klasöre/dizine islem.php adında bir dosya oluşturun ve içine aşağıdaki kodları kopyalayın. Kopyalamadan önce bu kodların içerisindeki veri tabanı adı, şifresi gibi kısımları kendinize göre düzenleyin.

<?php
if($_POST){
/* Veri tabanı bağlantısı */
$connx = mysql_connect("localhost","kullanici-adi","sifre") or die(mysql_error());
$dbConnx = mysql_select_db("veritabani-adi", $connx) or die(mysql_error());
/* Klavyeden girilen veriyi alma ve işlemleri yapma */
$value = mysql_real_escape_string(strip_tags(rtrim($_POST['value'])));
if(!$value){
echo 'Boş';
}else{
$find = mysql_query("SELECT * FROM tablo-adi WHERE tablo-oge like '%$value%'");
if(mysql_affected_rows()){
while($row = mysql_fetch_assoc($find)){
echo '<li>'.$row["tablo-oge"].'</li>';
}
}else{ echo 'yok'; }
}
}else{ header("Location: index.php"); }
?>

Son olarak CSS kodlarını style.css dosyanızın içine veya sitil dosyanızın adı neyse o dosyanın için kopyalayın. (Ben CSS kısmını gelişi güzel tasarladım. Siz kendi zevkinize göre düzenleyebilirsiniz.)

body{margin:0; padding:0; background: #fff}
*{margin:0; padding:0; list-style-type:none; border: none}
#dis-div{width:570px; padding:10px; margin:100px auto; background:#29a2d6; border:none;}
.input{padding:7px; width:400px; margin-left:80px; background:#fff; border:1px solid #eee; font:12px Trebuchet ms;}
#sonuclar{width:400px; padding:7px; margin-left:80px; margin-top:10px; background: #fff; border:1px solid #eee; font:12px Trebuchet ms;}
#sonuclar li{border-bottom:1px solid #eee; padding:5px; margin-bottom:5px}

İşlemler bu kadar. Kodlar uzun ve karışık gibi görünse de, kopyala-yapıştır yaparak birkaç dakika içerisinde tamamlanabilecek bir olay. Eğer yukarıdaki işlemlerle uğraşmak istemiyorsanız aşağıdaki linke tıklayıp, hazır halde bulunan "Google gibi Anında Önizlemeli Arama Formu" dosyalarını indirebilirsiniz.

Google gibi Anında Önizlemeli Arama Formu | İNDİR

Site içi anında önizlemeli arama formunu test etmek için bu sitede bulunan arama formunu kullanabilirsiniz.


20.06.2016

Konu hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (5)

  1. Mert

    Dediğiniz gibi kim istemez ki bu şekilde arama formu. Ben de yazılımcım ile görüşüp olabilme ihtimalini görüşeceğim.

  2. Altuğ Başburak

    Bu projeyi sitemde uygulamayı uzun zamandır düşünüyor ama erteliyordum. Sitede öylesine gezinirken bu konu karşıma çıktı. Sanırım uygulamanın zamanı geldi :)

  3. Veli

    Aslında ben genelde js kodlarını kaldırmak istiyorum. Genel olarak sitede yavaşlamaya sebep oluyor. Ancak onlar olmadan da bir şey yapamıyorsun, çok sade kalıyor.

  4. Tolga

    Ben sırf denemek için arama formunu indirdim. Direk indirme linkini paylaştığınız için teşekkürler.

  5. Nihat

    Dostum çok sağ olasın direk arşivledim. Böyle bir şey ileride lazım olacaktır. Paylaşım güzel +1