Vue.js Autocomplete Bileşeni Geliştirme (Kütüphanesiz)

Bu rehberde ne öğreneceksiniz?

Bu rehberde Vue.js kullanarak tamamen özelleştirilebilir bir Autocomplete (Otomatik Tamamlama) bileşeni geliştireceksiniz.
Klavye navigasyonu, tıklama kontrolü ve asenkron veri desteği adım adım ele alınır.

---

🧠 Teknik Özet

Bu rehber Vue.js ile kütüphanesiz autocomplete bileşeni oluşturmayı anlatır.
Amaç, kullanıcı deneyimini artıran hızlı ve kontrol edilebilir bir arama alanı geliştirmektir.
Adımlar: bileşen iskeleti, filtreleme, tıklama yönetimi, klavye kontrolü ve async destek.

---

Ön Gereksinimler

• Bilgisayarınızda Node.js kurulu olmalıdır
• Vue.js bileşen mantığına temel seviyede hakim olmanız yeterlidir

---

1️⃣ Proje Kurulumu

Vue CLI ile yeni bir proje oluşturun.

npx @vue/cli create rabisu-autocomplete --default

• Bu komut varsayılan ayarlarla Vue 2 tabanlı proje oluşturur.

---

• Proje dizinine geçin.

cd rabisu-autocomplete

---

2️⃣ Autocomplete Bileşen İskeleti

• src/components/SearchAutocomplete.vue dosyasını oluşturun.

<template>
  <div class="autocomplete">
    <input type="text" />
    <ul class="sonuc-listesi">
      <li class="sonuc-ogesi">Örnek Sonuç</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SearchAutocomplete'
};
</script>

• Bu yapı giriş alanı ve sonuç listesini oluşturur.

---

3️⃣ Filtreleme Mantığı (v-model)

1. Kullanıcı yazdıkça sonuçları filtreleyelim.

<input
  v-model="arama"
  @input="degisti"
  type="text"
/>

• Bu yapı iki yönlü veri bağlama sağlar.

---

data() {
  return {
    arama: '',
    sonuclar: [],
    acikMi: false
  };
},
methods: {
  filtrele() {
    this.sonuclar = this.veriler.filter(item =>
      item.toLowerCase().includes(this.arama.toLowerCase())
    );
  },
  degisti() {
    this.filtrele();
    this.acikMi = true;
  }
}

• Bu kod, girilen metne göre listeyi günceller.

---

4️⃣ Sonuç Seçimi ve Dışarı Tıklama

1. Kullanıcı bir sonuca tıkladığında liste kapanmalıdır.

<li
  v-for="(sonuc, i) in sonuclar"
  :key="i"
  @click="sec(sonuc)"
>
  {&#123; sonuc &#125;}
</li>
methods: {
  sec(sonuc) {
    this.arama = sonuc;
    this.acikMi = false;
  },
  disariTiklama(e) {
    if (!this.$el.contains(e.target)) {
      this.acikMi = false;
    }
  }
},
mounted() {
  document.addEventListener('click', this.disariTiklama);
},
destroyed() {
  document.removeEventListener('click', this.disariTiklama);
}

• Bu yapı kullanıcı deneyimini ciddi şekilde iyileştirir.

---

5️⃣ Klavye Navigasyonu (↑ ↓ Enter)

1. Klavye desteği ile profesyonel kullanım sağlanır.

<input
  @keydown.down="asagi"
  @keydown.up="yukari"
  @keydown.enter="enter"
/>
data() {
  return {
    seciliIndex: -1
  };
},
methods: {
  asagi() {
    if (this.seciliIndex < this.sonuclar.length - 1) {
      this.seciliIndex++;
    }
  },
  yukari() {
    if (this.seciliIndex > 0) {
      this.seciliIndex--;
    }
  },
  enter() {
    if (this.seciliIndex >= 0) {
      this.arama = this.sonuclar[this.seciliIndex];
      this.acikMi = false;
      this.seciliIndex = -1;
    }
  }
}

• Bu kod klavye ile seçim yapmayı mümkün kılar.

---

6️⃣ Asenkron Veri Desteği

1. API üzerinden gelen veriler desteklenir.

props: {
  asenkron: {
    type: Boolean,
    default: false
  }
},
data() {
  return {
    yukleniyor: false
  };
},
watch: {
  veriler() {
    if (this.asenkron) {
      this.sonuclar = this.veriler;
      this.yukleniyor = false;
      this.acikMi = true;
    }
  }
}

• Bu yapı backend destekli aramalar için idealdir.

---

❓ Sıkça Sorulan Sorular (SSS)

1. v-show neden kullanıldı? Liste sık açılıp kapandığı için performans avantajı sağlar.

2. Debounce eklenmeli mi? Asenkron kullanımda önerilir.

3. Form içinde çalışır mı? Evet, input değeri rahatlıkla gönderilebilir.

4. Vue 3’te çalışır mı? Mantık aynıdır, lifecycle isimleri değişir.

---

🎯 Sonuç

Bu rehberle Vue.js kullanarak tamamen kontrol edilebilir bir autocomplete bileşeni geliştirdiniz. Kütüphaneye bağımlı kalmadan, performanslı ve ölçeklenebilir bir çözüm elde ettiniz.

Bu tür kullanıcı odaklı bileşenleri** Rabisu Bulut** altyapısında yüksek hızla yayına alabilirsiniz.