PHP ve jQuery ile Anında Önizlemeli Arama Formu

PHP ve jQuery ile Anında Önizlemeli Arama Formu

sola ok  Kaldırılan İçerikler

20.06.2016

1,745 Gösterim

Bu içeriği 3 dakikada okuyabilirsiniz.

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.






Bu içeriği MasivaTurk.com sitesini kaynak göstererek kullanabilirsiniz. İçeriklerin; MasivaTurk.com sitesi kaynak gösterilmeden herhangi bir web sayfasında, sosyal medyada ve görsel basında yayınlanması yasaktır. Ayrıntılı bilgi için Kullanım Koşulları sayfasını okuyabilirsiniz.

20.06.2016

İçerik hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (7)

  1. Gökhan

    Hocam arama kod için teşekkürler. Birde çıkan sonuca tıklayım text alanına yazdırabileceğimiz kodu da eklerseniz süper olacak. Şu anki hali ile tıklanamıyor sadece listeliyor.

  2. Poyraz Can

    Merhaba verdiğiniz kodlar çok işime yaradı, cidden çok sağ olun. Bu arada sitenizin tasarımı çok iyi. Bu tür çalışmaların devamını bekliyoruz. İyi günler.

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

  4. 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 :)

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

  6. Tolga

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

  7. Nihat

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


Bu İçerikler de İlginizi Çekebilir...

PHP ve jQuery ile Anında Önizlemeli Arama Formu
20.06.2016
1,745 Gösterim

PHP ve jQuery ile 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, jQuery kullanarak yapmak mümkündür.

Üzerine Gelince Büyüyen Resimler
13.12.2015
3,004 Gösterim

Üzerine Gelince Büyüyen Resimler

Web siteleri için, mouse ile üzerine gelindiğinde büyüyen resim kodları

Tarihte Bugün Scripti Yapımı
06.06.2016
1,685 Gösterim

Tarihte Bugün Scripti Yapımı

Tarihte bugün scripti, asp, php gibi programlama dilleriyle, farklı şekillerde kodlanabilir. En basit haliyle php ile tarihte bugün kodları, scripti

+18 Uyarı Panosu Yapımı
21.06.2016
2,082 Gösterim

+18 Uyarı Panosu Yapımı

En basit haliyle, html, css ve javascript kullanarak +18 uyarı panosu yapımı, kodları

Localhost .htaccess Ayarı
24.01.2016
1,638 Gösterim

Localhost .htaccess Ayarı

Php ile kodlama yaparken herkesin kullandığı .htaccess dosyası localhostta aktif değildir. Kodlama esnasında birçok sorunu önlemek için .htaccess dosyasını localhostta aktif etmek gerekmektedir.

X

MasivaTurk.com içeriklerini
YouTube'dan takip edebilirsiniz.

YOUTUBE KANALIMA ÜCRETSİZ
ABONE OLMAK İÇİN TIKLA