Javascript ile input alanına girilen değeri, dizide arayıp anlık sonuç verme işleminin nasıl yapılacağını göreceğiz. Bu işlemi includes fonksiyonunu kullanarak sağlıyoruz. Bu fonksiyon seçilen verinin var olup olmadığını kontrol etmektedir. Eğer yazılan veri, dizide varsa true dönecektir. Eğer aranan veri dizide yoksa false değeri dönecektir. Javascript arama işleminin nasıl olduğuna başlayalım.
Javascript includes fonksiyonunu Kullanımı
Bu işlemi sağlayabilmek için ilk olarak HTML alanını oluşturalım. Bu HTML alanında, verileri alabilmek için bir input ve sonuçları yayınlamak için bir DIV oluşturuyoruz.
<p>Arama Yap!</p> <input id="AramaYap" placeholder='Arama yapmak için bir şey yazınız' onkeyup="bul(this.value)" /> <div id="sonuc"></div>
Bu alanda dikkat etmemiz gereken konu, input değerinde onkeyup bulunması. Buda, input alanına yazılan değeri anlık olarak almanızı sağlayacaktır. Alınan veriyide bul() isimli fonksiyona yönlendiriyoruz. Bu fonksiyonda alınan değeri işleyerek sonuç üreteceğiz. Elde edilen sonuçlarıda DIV etiketinde yer alan sonuc özelliğini kullanarak sağlayacağız.
Şimdide arama işlemini sağlayacağımız dizimizi oluşturalım. Bu diziye de veriler ekleyelim.
var veriler = ["ibrahim Çevrük","Ceylin Çevrük","Yakup Can","Yasin","Livaneli","Seray Şahiner"];
Diziyide oluşturduğumuzda göre şimdi de bul() fonksiyonunu oluşturup, gelen veriyi dizi ile karşılaştırarak sonuç üretelim.
bul = (aranacak) => {
document.getElementById('sonuc').innerHTML = '';
if (aranacak != '') {
var ul = document.createElement('ul');
for (var i = 0; i < veriler.length; i++){
if (veriler[i].includes(aranacak)){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = veriler[i];
li.setAttribute('onclick', 'sec(this)');
}
}
document.getElementById('sonuc').appendChild(ul);
}else{
document.getElementById('sonuc').innerHTML = '';
}
}
Yukarıdaki gibi fonksiyonu oluşturuyoruz. Peki bu fonksiyonda neler yaptık? Hemen listelendirelim.
- İlk olarak sonuc değerinin içerisini temizliyoruz.
- Aranacak değerin boş olup olmadığını kontrol ediyoruz.
- Gelen değer boş değilse, javascript yardımıyla HTML etiketlerinden UL etiketini oluşturuyoruz.
- Ardından dizideki elemanları döndürüyoruz. Buradaki amaç, dizide yer alan verileri tek tek alıp karşılaştırmak.
- Dönen değer içerisinde arama yapmak için includes fonksiyonunu kullanıyoruz. Gelen değeri bu fonksiyondan geçirerek varsa true döneceğini bildiğimizden dolayı, if ifadesine direkt bu değeri yazıyoruz.
- Aranan değer bulunduğunda yine javascript ile Lİ etiketini oluşturuyoruz.
- Oluşturduğumuz Lİ etiketini UL etiketinin içerisine dahil ediyoruz.
- Bulunan sonuca ait veriyi de Lİ ifadesinin içerisine ekliyoruz.
- Oluşturulan Lİ ifadesine onclick özelliği ekliyoruz. Bunun içinde sec() fonksiyonu oluşturuyoruz. Bunu daha sonra kodlayacağız.
- Her şey hazır. Son olarak sonuc divine, oluşturduğumuz UL yapısını yazdırıyoruz. Böylece dizi içerisinde eşleşen verileri anlık olarak listelendirmiş oluyoruz.
- Son olarak gönderilen değer boşsa, sonuc divini boşaltıyoruz.
Yukarıdaki sıralamayla asıl işleri sağlayacak fonksiyonu oluşturmuş oluyoruz. Son olarak, sec ismindeki fonksiyonuda oluşturup örneği tamamlayalım.
sec = (veri) => {
var t = document.getElementById('AramaYap');
t.value = veri.innerHTML;
document.getElementById('sonuc').innerHTML = '';
}
Listelenen eşleşmiş verilerin üstüne tıklatıldığında, tıklanan değeri INPUT’un içerisine yazıyoruz ve sonuc divini temizliyoruz.
Javascript ile arama işleminde eşleşen veriyi bu şekilde sunabilirsiniz. Güzel ve etkili bir örnek olduğunu düşünüyorum. Yukarıda yapmış olduğumuz örneğin tam halinide şu şekilde ekleyebiliriz.
<!DOCTYPE html>
<html>
<head>
<title>Javascript ile Anlık Arama İşlemi</title>
<style>
ul {list-style:none;padding:0px;margin:10px 0}
ul li{padding:10px; border:1px solid #ddd; }
</style>
</head>
<body>
<p>Arama Yap!</p>
<input id="AramaYap" placeholder='Arama yapmak için bir şey yazınız' onkeyup="bul(this.value)" />
<div id="sonuc"></div>
</body>
<script>
var veriler = ["ibrahim Çevrük","Ceylin Çevrük","Yakup Can","Yasin","Koray Atlı","Seray Güler"];
bul = (aranacak) => {
document.getElementById('sonuc').innerHTML = '';
if (aranacak != '') {
var ul = document.createElement('ul');
for (var i = 0; i < veriler.length; i++){
if (veriler[i].includes(aranacak)){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = veriler[i];
li.setAttribute('onclick', 'sec(this)');
}
}
document.getElementById('sonuc').appendChild(ul);
}else{
document.getElementById('sonuc').innerHTML = '';
}
}
sec = (veri) => {
var t = document.getElementById('AramaYap');
t.value = veri.innerHTML;
document.getElementById('sonuc').innerHTML = '';
}
function sec(veri){
var t = document.getElementById('AramaYap');
t.value = veri.innerHTML;
document.getElementById('sonuc').innerHTML = '';
}
</script>
</html>
