"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK

yakuter


04 Eylül 2006

Ajax İle Site İçi Arama - Livesearch

Etiketler: , , , ,
Kategori Ajax, Web |

Websitelerimizde performansı artırmak için yapabileceklerimiz arasında Site İçi Arama işlemini ajax ile programlamak da vardır. Her ne kadar tembellikten kendi sitemde henüz kullanmamış olsam da bu bahsettiğim arama işlemini kendi yaptığım tema ŞebnemFerah.Biz'de kullandım. Nasıl çalıştığını orada görebilirsiniz. Şimdi sıra geldi nasıl kurulduğuna...

Kurulumu

  • Gerekli dosyaları buradan indiriniz. İndireceğiniz paketten 2 dosya çıkacak: livesearch.php ve livesearch.js
  • Paketten çıkan bu iki dosyayı nereye göndereceğimiz çok önemli.
    livesearch.php ->blogumuzun ana dizinine yani wp-config.php ile aynı dizine.
    livesearch.js->temamızın içinde js adıyla yaratacağımız klasöre (siteniz/wp-content/themes/temanız/js/)
  • Önemli: livesearch.js dosyasının 141nci satırında kendi sitenizi adresini yazın.
  • Daha sonra temanızın header.php dosyasına livesearch.js dosyamızı dahil etmeliyiz ki şu kod işimizi görecektir.
Duz Metin
<script type="text/javascript" xsrc="<?php bloginfo('template_directory'); ?>/js/livesearch.js"></script>

not: src'nin başında x yok. Kodu kullanırken src olarak kullanınız.

  • Temamızda arama formumuz şu şekilde olmalı. sidebar.php ye bu kodu direk ekleyebilirsiniz.
Duz Metin
<form id="searchform" name="searchform"  onsubmit="return liveSearchSubmit()" method="get" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<input type="text"  name="q" id="livesearch" onkeypress="liveSearchStart()" />
<input type="submit" id="submit" style="display: none;" value="Ara" />
</form>

Arama sonucunun görünmesini istediğimiz yere ki bu yukarıdaki arama formunun hemen altı olabilir, şu kodu ekliyoruz.

Duz Metin
<div id="LSResult" style="display: none;">Arama Sonucu
<div id="LSShadow"></div>
</div>
 

Son işlem olarak arama sonuçlarının ekranda görünmesini istediğimiz şekli css dosyasında belirtiyoruz. Temanızın style.css dosyasını açıp şu kodu ekleyin.

Duz Metin
.sb-search {
margin-top: 20px;
}

.sb-search h2 {
display: none;
}

input#livesearch {
font: 1em Verdana, Arial, Helvetica, Sans-Serif;
padding: 3px;
color: White;
border-color: Maroon;
width: 125px;
border: 1px solid Gray;
margin: 5px 5px 4px 15px;
margin-right: 10px;
background-color: Maroon;
width:210px;
}

#LSResult {
margin: 0;
margin-left: 10px;
width: 225px;
z-index: 100;
position: absolute;
background-color: #000000;
border-bottom: 1px solid #eee;
}

#searchcontrols {
text-align: center;
padding: 1px;
background: #ddd center repeat-y;
}

#searchcontrols small {
margin: 0;
padding: 0;
}

.LSRow:hover, #LSHighlight, #LSHighlight:hover {
background-color: #000000;
}

#LSResult:hover #LSHighlight {
background: none;
border: none;
padding: 5px 2px;
}

#LSHighlight small, #LSHighlight small span a {
color: #999;
}

.LSRow {
padding: 5px 10px;
}

.LSRow span a, .LSRow span a:visited {
word-spacing: -1px;
line-height: 1.3em;
font-weight: normal;
color: #bbb;
}

Eğer unuttuğum bir nokta yoksa çalışacaktır. Güle güle kullanın ;)


Benzer Yazılar

“Ajax İle Site İçi Arama - Livesearch” için 4 Yorum

  • 1 kutlay
    16 Ekim 2007, 00:38

    bu arama motoru çok güzel de bunu html ve asp ye uygulayabilirmiyiz-nasıl veya asp-html kodları varmı teşekkürler

  • 2 hcg
    03 Ocak 2008, 16:11

    bu merak ettiğim birşeydi, bu konuya değindiğiniz için teşekkür ederim fakat gerekli dosyaları indiremiyorum(malum hemen paylaş kapalı şu sıralar). bu konuda yapabileceğiniz birşey var mı acaba? saygılar, iyi çalışmalar..

  • 3 Sefa
    12 Mart 2008, 20:39

    Hocam Acaba Yeni Bir Programlama Sitesi Acsaniz İyi olmazmi bence bilgilerinizi paylasin…

  • 4 yakuter
    13 Mart 2008, 16:09

    http://www.ajax-tr.com

    Yukarıda verdiğim adresi bu amaçla açtık fakat zamanım olmadığı için fazla yazamıyorum.


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS