Bu son bölümümüzde JSON tabanlı anlık arama motoru tasarlayacağız. JSON ile ilgili diğer makaleleri incelediyseniz, şimdiye kadar tasarladığımız uygulamalardaki JSON yapılarını RESTful API hizmeti veren websitelerinden almıştık. Bu tasarımımızda, kendi oluşturduğumuz JSON dosyası ile anlık arama motorunu tasarlayacağız.

JSON'larla ilgili önceki bölümlere bu linklerden ulaşabilirsiniz. Bölüm 1 Bölüm 2 Bölüm 3

Farzedelim ki kitaplarla ile ilgili bir websayfamız var. Kullanıcıların kitap aramalarında kullanacağı bir arama motorunu JSON kullanarak rahatlıkla yapabiliriz. Aynı zamanda bu motor, kullanıcı harfleri yazdıkça çalışacak. Örneğin kullanıcı "sefiller" kitabını aramak istediğinde, se harflerini yazdığı anda arama yapılıp, sonuçlar gösterilmeye başlanacak (sefiller, hayalet sevgilim, Gelsen ya gibi). "f" harfini de yazdığı anda, listede sadece "sefiller" kitabı gösterilecek. Bu sayede arama işlemi oldukça kolaylaşmış olacak.

Öncelikle JSON yapımızı oluşturalım. Arama sonuçlarında ne göstermek istiyorsak, bunları uygun şekilde JSON dosyasına eklememiz gerekiyor. Dilerseniz bu uygulamamızda, kullanıcının kitap ve yazar adına göre arama yapacağı seçenekler ekleyelim. Sonuçlarda ise, küçük olacak şekilde kitap resimlerini, kitap adı, basım yılı, yazar, kategori, fiyat gibi kısımları da kullanıcıya gösterelim. JSON yapımız aşağıdaki gibi olacaktır.

[{
	"no": 1,
	"kitap_adi": "Başlangıç",
	"yazar": "Dan Brown",
	"basim_yili": 2017,
	"fiyat": 75,
	"kategori": "gizem",
	"resim": "1.jpg"
}, 
{
	"no": 2,
	"kitap_adi": "Tütüncü Çırağı",
	"yazar": "Robert Seethaler",
	"basim_yili": 2017,
	"fiyat": 16,
	"kategori": "dram",
	"resim": "2.jpg"
},

...
...
...

{
	"no": 10,
	"kitap_adi": "Anlatış",
	"yazar": "Ursula K. Le Guin",
	"basim_yili": 2017,
	"fiyat": 35,
	"kategori": "bilim-kurgu",
	"resim": "10.jpg"
}]

Bu şekilde 10 kitap bilgilerini içeren bir JSON dosyası oluşturduğumuzu düşünelim. Elde ettiğimiz JSON dosyasına buradan ulaşabilirsiniz.

Sıra geldi HTML yapısına. Sonuçları liste şeklinde oluşturmak kolay olacaktır. O yüzden AJAX metodu sonucunda sonuçların gösterileceği "sonuclar" isimli boş bir katmanı, kullanıcının arama yapacağı alanı, yazar ve kitap adı seçimlerinin yapılacağı bir "select" elemanını HTML yapımıza ekleyelim.

<select name="" id="arama-secimi">
<option value="kitap">Kitap Adı</option>
<option value="yazar">Yazar Adı</option>
</select>
<input type="search" name="" id="kitap-arama-alani"  placeholder="Aranacak Kelime(ler) Giriniz"/>
<div id="sonuclar"></div>

HTML yapımızdan sonra CSS komutlarıyla görsel düzenlemeleri yapalım.

#arama-secimi, #kitap-arama-alani{
	display: inline-block;
	padding: 10px;
	margin:5px;
}
#kitap-arama-alani{width: 250px;}
#sonuclar>ul{list-style: none;}
#sonuclar>ul>li{
	padding: 10px;
	border:1px solid #666;
	background: #ccc
}

#sonuclar>ul>li>span{
	display: block;
	padding: 5px;
}
#sonuclar>ul>li>img{
	float: left;
	margin-right: 10px;
}

Sıra geldi, JSON bilgilerini alıp, kullanıcının aramasına göre işlemeye.

var kitap=[];
$.ajax({
	url:"kitaplar.json",
	dataType:"json",
	type:"get",
	success:function(veri){
		kitap=veri;
	},
	error:function(){
		$("#sonuc").html('>ul<>li<Bağlantı hatası...>/li<>/ul<');
	}
});

$("#kitap-arama-alani").keyup(function(){
	var liste='', i=0, deger = $(this).val();;
	var sablon = new RegExp(deger,"i");
	var arama_secimi = $("#arama-secimi").val();

	if (arama_secimi == "kitap"){
		if (deger.length<=2){
			$.each(kitap,function(){
				if(kitap[i].kitap_adi.match(sablon)) {
					liste+='>li<' + '>img src="images/' + kitap[i].resim +
					'"<>span<Kitap : ' + kitap[i].kitap_adi +
					'>/span<>span<Yazar : ' + kitap[i].yazar +
					'>/span<>span<Fiyat : ' + kitap[i].fiyat +
					'TL >/span<>span<Basım Yılı : ' + kitap[i].basim_yili +
					'>/span<>span<Kategori : ' + kitap[i].kategori +
					'>/span<>/li<';
				}
			i++;
			});
			$("#sonuclar").html('>ul<'+liste+'>/ul<');
		}
	}else{
		if (deger.length<=2){
			$.each(kitap,function(){
				if(kitap[i].yazar.match(sablon)) {
					liste+='>li<' + '>img src="images/' + kitap[i].resim +
					'"<>span<Kitap : ' + kitap[i].kitap_adi +
					'>/span<>span<Yazar : ' + kitap[i].yazar +
					'>/span<>span<Fiyat : ' + kitap[i].fiyat +
					'TL >/span<>span<Basım Yılı : ' + kitap[i].basim_yili +
					'>/span<>span<Kategori : ' + kitap[i].kategori +
					'>/span<>/li<';
				}
				i++;
			});
			$("#sonuclar").html('>ul<'+liste+'>/ul<');
		}
	}
});

Kodlarımızı açıklayalım. İlk olarak AJAX metoduyla JSON bilgilerimizi alıyoruz. Aldığımız bilgiler "kitap" isimli bir diziye aktarılıyor. Kullanıcı arama alanında herhangi bir tuşa bastığında "keyup" fonksiyonu çalışmaya başlıyor. Fakat burada bir sınırlamamız var, sonuçları gösterecek komutların çalışması için, kullanıcının en az iki karakter girmesi gerek. Aksi takdirde bir karakter ile bütün kayıtlar gösterileceğinden, özellikle çok miktarda kayıtlarda yükleme süresi sıkıntı yaratabilir, ayrıca tarayıcı verileri işleyemez hale gelebilir. Kullanıcı iki karakter yazdığı anda "each" döngüsü çalışmaya başlıyor ve bütün kayıtlarda kitap adı veya yazar adına göre eşleşen kayıtlar, HTML liste komutları arasında daha önce tanımladığımız liste isimli değişkene aktarılıyor. Döngü bittiğinde, liste değişkeninin içeriği "sonuclar" katmanına ekleniyor.

Tasarım hem görsel olarak hem de ek özellik eklemeleriyle çok daha iyi şekle dönüştürülebilir. Karışık bir kodlama olmaması açısından, bazı özellikleri ve görsel düzenlemeleri yapıya eklemedim.

Tasarladığımız uygulamayı aşağıdan deneyebilirsiniz. Daha öncede belirttiğim gibi JSON dosyasında toplam 10 kayıt bulunuyor.

Kitap Adı ile sonuç görebileceğiniz kayıtlar : Başlangıç, Tütüncü Çırağı, Kırmızı Piyano, Sayıklama, Kirliydi Kar, Denemeler, 4 3 2 1, Başka Dünyanın Kuşları, Fırın Saldırısı, Anlatış.

Yazar Adı ile sonuç görebileceğiniz kayıtlar : Dan Brown, Tütüncü Çırağı, Kırmızı Piyano, Carlos Labbe, Georges Simenon, Sihirli Fasulyeler, Paul Auster, Brad Watson, Haruki Murakami, Ursula K. Le Guin