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,402 Gösterim

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

+18 Uyarı Panosu Yapımı
21.06.2016
1,743 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,390 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.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,498 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.

Üzerine Gelince Büyüyen Resimler
13.12.2015
2,178 Gösterim

Üzerine Gelince Büyüyen Resimler

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

X

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

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