clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

How to Create an Autocomplete Search Suggestions in Vue JS

writter  Sumit Dey Sarkar
Date  01 Jan 2023
Language  Vue JS
How to Create an Autocomplete Search Suggestions in Vue JS

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 :

How to Make an Autocomplete Search Suggestions in Vue JS

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

How to Make an Autocomplete Search Suggestions in Vue JS