How to Create an Autocomplete Search Suggestions in Vue JS

In this tutorial, we will learn how to create autocomplete search suggestion functionality in vue js in a very easy way without using any external package.

Preview :

Lets see the below example in which we create autocomplete search suggestion functionality in vue js.

Step 1 - Create a view component.

Step 2- In the second step, simply paste the following code in your view component.

<template lang="">
  <main>
    <div class="searchListMainDiv">
        <h1>Search Your Favorite Fruits</h1>
        <input type="text" v-model="search" placeholder="Search...">
        <ul>
          <li v-for="(item, index) in filteredList" :key="index" @click="() => search = item" v-html="item.replace(search, `<strong>${search}</strong>`)"></li>
        </ul>
    </div>
  </main>
</template>
<script>
export default {
  data() {
    return {
      search: "",
      fruits: [
        "Apple",
        "Apricot",
        "Avocado",
        "Banana",
        "Blueberry",
        "Cherry",
        "Coconut",
        "Carambola",
        "Grape",
        "Grapefruit",
        "Jackfruit",
        "Kiwi",
        "Lime",
        "Lemon",
        "Mango",
        "Mandarin",
        "Melon",
        "Nectarine",
        "Orange",
        "Pear",
        "Pomegranate",
        "Plum",
        "Papaya",
        "Pineapple",
        "Peach",
        "Raspberry",
        "starfruit",
        "Strawberry",
        "Watermelon",
      ],
    };
  },
  computed: {
    filteredList() {
      return this.fruits.filter(item => {
        return (
          this.search && item.toLowerCase().includes(this.search.toLowerCase())
        );
      });
    },
  },
};
</script>
    <style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.searchListMainDiv {
  min-width: 40%;
  margin: 0 1rem;
}
.searchListMainDiv h1 {
  margin-bottom: 1rem;
}
.searchListMainDiv ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0.5rem;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
  border: 1px solid rgb(255, 255, 255);
  max-height: 200px;
  overflow-y: auto;
}
.searchListMainDiv ul::-webkit-scrollbar {
  width: 5px;
}
.searchListMainDiv ul::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ddd;
  border-radius: 10px;
}
.searchListMainDiv ul::-webkit-scrollbar-thumb {
  background: rgb(183, 183, 183);
  border-radius: 10px;
}
.searchListMainDiv ul::-webkit-scrollbar-thumb:hover {
  background: #a2a2a2;
}
.searchListMainDiv input {
  background-image: url("https://www.teknowize.com/attachments/file_1658670439.svg");
  background-size: 21px;
  background-repeat: no-repeat;
  background-position: 98% 50%;
  height: 45px;
  width: 100%;
  box-shadow: none;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
  padding: 0 2.5rem 0 1rem;
  color: #333;
  font-size: 18px;
}
.searchListMainDiv input:focus {
  border: 1px solid #ddd;
  outline: none;
}
.searchListMainDiv ul li {
  padding: 1.2rem 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 0;
  border-bottom: 1px solid #ddd;
  color: #333;
  cursor: pointer;
}
.searchListMainDiv ul li:last-child {
  border: none;
}
</style>

Step 3 - Now, start the npm server

Output