Merhaba arkadaşlar.Bu derste sizlere blogunuzda nasıl ajax arama formu oluşturacağınız göstereceğim.Yapımı gayet basittir.2 adımda halledebilirsiniz.
Hemen başlayalım.

1 – sitenin yazılarının taşındığı divi belirleyin.

Her sitede mutlaka yazıların bulunduğu bir div vs vardır.Önce onu tesipt etmeniz gerekiyor.Çünkü load() fonksiyonu sayfa yenilenmeden,istek yapılan sayfadaki belirlenen divi yükleyecek.Sanırım aşağıdaki resim mantığı anlatıyor.


Genellikle bu div,#sol,#left vsdir.Bunu bulmak size kalmış.Gerekirse siz yeni bir div içine alabilirsiniz arama sonuçlarını.

2 – Header.php ye kod ekleme


<script></script>

<script>
$(document).ready( function() {
$('input[name=s]').keyup(function() {
var kelime = $('input[name=s]').val();
var adres = '?s='+kelime;
$.ajax({
type: 'GET',
data: kelime,
success: function(ajaxCevap) {
$('#sol').load(adres+' #sol');
}
});
return false;
});

});
</script>

Gördüğünüz gibi $('#sol').load(adres+' #sol'); şeklinde olan yerde nerenin nereye yükleneceğini belirttik.
Bundan sonra tek yapmanız gereken bileşenlerden arama formunu etkin hale getirip çalışıp çalışmadığını kontrol etmek.

Demo olarak blogumdaki ustteki arama formunu kullanabilirsiniz.

Yazımın kaynağı

Not:emeğe saygı.yazıları (ç)alarken link eklerseniz sizin için de benim için de daha iyi olur.