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,577 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...

CSS ile Scrollbar Ayarları
29.12.2015
1,477 Gösterim

CSS ile Scrollbar Ayarları

Web sitelerinde bulunan scrollbar(kaydırma çubuğu) görünümünü kişiselleştirmek için gereken kodlar.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,600 Gösterim

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme

Kaynak belirtilmeden kopyalanan yazılara otomatik kaynak adresi eklemek için küçük bir javascript kod blogunun siteye eklenmesi yeterli olacaktır.

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama
09.07.2016
4,483 Gösterim

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama

Php ile tamamen yasal olarak tc kimlik numarası, isim, soyisim, doğum tarihi doğrulama

PHP ve jQuery ile Anında Önizlemeli Arama Formu
20.06.2016
1,577 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.

HTML ve CSS ile Duyuru Panosu
11.05.2016
3,329 Gösterim

HTML ve CSS ile Duyuru Panosu

Sahibi olduğunuz web sitesine html ve css ile duyuru panosu ekleyin. HTML duyuru panosu kodları.

X

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

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