Vue.js Autocomplete Component Development (Without Library)

What will you learn in this guide?

In this guide, you will develop a fully customizable Autocomplete component using Vue.js.
Keyboard navigation, click control, and asynchronous data support are covered step by step.

🧠 Technical Summary

This guide explains how to create a library-free autocomplete component with Vue.js.
The goal is to develop a fast and controllable search field that improves the user experience.
Steps: component skeleton, filtering, click handling, keyboard control and async support.

---

Prerequisites

• Node.js must be installed on your computer
• It is enough to have a basic understanding of Vue.js component logic

---

1️⃣ Project Setup

Create a new project with Vue CLI.

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

• This command creates Vue 2 based project with default settings.

---

• Change to the project directory.

cd genixnode-autocomplete

---

2️⃣ Autocomplete Component Skeleton

• Create the file src/components/SearchAutocomplete.vue.

<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>

• This structure creates the input field and the result list.

---

3️⃣ Filtering Logic (v-model)

1. Let's filter the results as the user types.

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

• This structure provides two-way data binding.

---

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;
  }
}

• This code updates the list based on the entered text.

---

4️⃣ Result Selection and Clicking Out

1. The list should close when the user clicks on a result.

<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);
}

• This structure significantly improves the user experience.

---

5️⃣ Keyboard Navigation (↑ ↓ Enter)

1. Professional use is provided with keyboard support.

<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;
    }
  }
}

• This code makes it possible to make selections with the keyboard.

---

6️⃣ Asynchronous Data Support

1. Data coming via API is supported.

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;
    }
  }
}

• This structure is ideal for backend supported searches.

---

❓ Frequently Asked Questions (FAQ)

1. Why was v-show used? It provides a performance advantage because the list is opened and closed frequently.

2. Should Debounce be added? Recommended for asynchronous use.

3. Does it work in the form? Yes, the input value can be sent easily.

4. Does it work in Vue 3? The logic is the same, lifecycle names change.

---

🎯 Result

With this guide you have developed a fully controllable autocomplete component using Vue.js. You have obtained a high-performance and scalable solution without being dependent on the library.

You can publish such user-oriented components at high speed on the** GenixNode** infrastructure.