Otomatik Arama Tamamlama Sistemi Mantığı (HTML/CSS/JS)

Küçük bir yan projem için otomatik arama tamamlama sistemi implement etmem gerekiyordu. Bu tür bir sistem oluşturmadan önce her zaman için çok zaman alacağını düşünüp kendime stres yapmama rağmen çok da karışık veya uzun süren bir sistem olmadığını, sadece adımları doğru takip etmek gerektiğini düşünerek bu adımları sıralayacağım bir yazı yazmak mantıklı olabilir diye düşündüm.

Screenshot at Sep 03 13-07-11

Backend Kelimeye Uygun Sonuçlar: Öncelikle backend'den arama kelimesine (term) uygun sonuçları almak için bir kod yazmamız gerekiyor. Backend sistemim için belirleyeceğim route üzerinde;

GET "/search?term=kelime"

Adresine get isteği yaptığımda içerisinde kelime olan sonuçta görünmesini istediğim verileri array olarak sıralaması, verilerde stringden daha fazla değer de olacaksa bir JSON header'ında bir obje dizisi dönmesi gerekiyor.

Bir Örnek "apple" araması için;

[
  {
    name: "Elma", 
    category: "184"
  }, 
  {
    name: "Elmas", 
    category: "46"
  },
  {
    name: "Elma Suyu", 
    category: "8"
  }
]

Burada mantık bu adrese istediğim her farklı term değeri ile get yaptığımda, backend sunucunun, büyük ihtimalle bir veritabanında en işlevsel aramayı yapıp bana alakalı birkaç sonucu kullanabilecek şekilde döndürmesi gerekiyor. Benim durumumda eski bir proje olduğundan backend için php kullanıyorum. Aynı mantık API katmanı mantığını uygulayabileceğiniz nodejs veya diğer backend dilleri için de geçerli. Buna ek olarak GET yerine bahsettiğimiz route'a POST ederek de term değerini aktarıp arama sonucu değerleri döndürebilirsiniz.

JSON verilerini Javascripte Aktarma: JSON verilerini her seferinde async olarak geçeceğimiz bir callback fonksiyonu ile, her input değeri için bahsi geçen adrese istekte bulunarak güncellenen verileri çekmeliyiz.

Basit bir kodla nasıl olacağını görelim. Burada tamamen vanilla javascript kullanıyor olacağız. AngularJS benzeri binding yapabileceğimiz bir kütüphane kullanarak işi çok daha kolaylaştırabilirdik, fakat bu yazıyı karıştırmamak amaçlı kodu olabildiğinca sembolik olarak göstermeye çalışalım;

<input type="text" id="searchInput" autocomplete="off" />
<div id="tahminDiv"></div>

HTML kodunda olabilecek en basit halde, bir arama inputu ve bu input içine yazılacak kelime ile alakadar tamamlanma sonuçlarını (tahminleri) bu div içerisinde sıralayacağız. Ayrıca dikkat ederseniz, bu input için autocomplete nitelik tanımlayıcısı, tamamlamayı biz yapacağımızdan kapalı durumda.

var tahmin = document.getElementById("tahminDiv");
var input = document.getElementById("searchInput");

Üzerinde çalışacağım iki element olduğundan dolayı, bunları seçtikten sonra kod boyunca bu değişkenleri kullanarak manipüle etme işlemi yapabilirim. Bu sayede DOM caching işlemini de halletmiş oluruz.

input.addEventListener("keydown", function(){
  setTimeout(function(){
    tahminleriCek(input.value);
  }, 1);
});

Sonrasında input elementi için bir keydown dinleyicisi register ederek, o anki input elementini her klavye tuşuna basışta, tahminleriCek() fonksiyonuna göndermek üzere ayarladık.

function tahminleriCek(val){
  if(val.length > 2){
    getJSON("/search?term="+val, function(n, resp){
     var kelimeArray = resp;
     var yeniTahmin = "";
     kelimeArray.forEach(function(word){
       yeniTahmin += `
       <a href='/sayfa/${kelime}/'>
        <li>${kelime}</li>
       </a>`;
     });
     tahmin.innerHTML = yeniTahmin;
    });
  }else{
    tahmin.innerHTML = "";
  }
}

Bu fonksiyonda, gelen val değeri eğer 2 karakterden fazla ise, yukarıda tanımladığımız getJSON fonksiyonunu kullanarak, her değişen val değeri için arama tahmin sonuçlarını alıp, bu sonuçları tahminDiv değerinin içinde güncelleyecek.

NOT: Tüm bunlara ek olarak her kelimeye basışta tahmileriCek fonksiyonunu çalıştırmaktansa, kullanıcının kelimenin tahmin isteyeceği kadarını yazması için ona bir zaman penceresi açmak ve buna bağlı olarak her harf için GET isteği yapmaktansa, sadece duraklamalarda GET isteği yapmak çok daha mantıklı olacaktır.

Yorumları Göster veya Yeni Yorum Yaz