Kaldırılan İçerikler
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>
<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>
<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"); }
?>
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}
*{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
Tamam da bunu veritabanına bağlayınca hata veriyor. Olmuyor yani "Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:xampphtdocsTürk Bilir Webislem.php:4 Stack trace: #0 {main} thrown in C:xampphtdocsTürk Bilir Webislem.php on line 4" bu hatayı veriyor ayrıca şu an web sitem html php olanı yayınlamadım
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.
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.
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.
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 :)
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.
Ben sırf denemek için arama formunu indirdim. Direk indirme linkini paylaştığınız için teşekkürler.
Dostum çok sağ olasın direk arşivledim. Böyle bir şey ileride lazım olacaktır. Paylaşım güzel +1