Hey fellow developers! Ever wondered how to spice up your Vue.js app with a slick autocomplete search? Look no further! In this guide, I'll show you an easy way to implement this feature, making your user interface more interactive and enjoyable.
Let's dive into the world of Vue.js and take your frontend skills to the next level.
So, let's create autocomplete search suggestion functionality in vue js, autocomplete component with vue.js, and vue 3 autocomplete search component.
Begin by creating a new Vue.js app using Vue CLI or your preferred setup. Open your project in your favorite code editor.
Install Vue CLI (Command Line Interface):
Open your terminal or command prompt and run the following command to install Vue CLI globally.
npm install -g @vue/cli
Create a New Vue Project:
Once Vue CLI is installed, use it to create a new Vue project.
vue create your-vue-app
Follow the prompts to set up your project. You can choose the default preset or manually select features based on your preferences.
Navigate to Your Project:
Change into your project directory.
cd your-vue-app
Run Your Vue App:
Start your Vue development server to see the default Vue app in action.
npm run serve
Install dependencies for your autocomplete search. You might want to use a library like vue-autosuggest or create your autocomplete component from scratch.
npm install vue-autosuggest
Build a new Vue component for your autocomplete search bar. Manage user input, fetch suggestions, and update the UI accordingly.
In your Vue project, create a new file for your AutocompleteSearch component. You can place it in the src/components directory
touch src/components/AutocompleteSearch.vue
Inside AutocompleteSearch.vue, define the template, script, and style sections.
<!-- AutocompleteSearch.vue -->
<template>
<div>
<input
v-model="value"
@input="onInputChange"
placeholder="Type to search..."
/>
<ul v-if="suggestions.length">
<li v-for="(suggestion, index) in suggestions" :key="index">
{{ suggestion.label }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
suggestions: [],
};
},
methods: {
onInputChange() {
// Simulate asynchronous data fetching
// Replace this with your actual data fetching logic, e.g., an API call
try {
// Example API endpoint for fetching suggestions
const apiUrl = `https://api.example.com/suggestions?query=${this.value}`;
// Make the API call
const response = await fetch(apiUrl);
// Parse the response as JSON
const data = await response.json();
// Update the suggestions data property
this.suggestions = data;
} catch (error) {
console.error('Error fetching suggestions:', error);
}
},
},
};
</script>
<style scoped>
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
li:last-child {
border-bottom: none;
}
</style>
In this example, the onInputChange method uses the fetch function to simulate asynchronous data fetching from an API endpoint.
Method 2:
<template lang="">
<main>
<div class="searchListMainDiv">
<h1>How to create auto suggestions in vue 3 - Vidvatek</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: "",
cars: [
"Audi",
"BMW",
"Chevrolet",
"Ford",
"Honda",
"Mercedes",
"Nissan",
"Toyota",
],
};
},
computed: {
filteredList() {
return this.cars.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://img.icons8.com/ios/50/search--v1.png");
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>
Integrate your AutocompleteSearch component into your Vue application. Place it where you want to add search functionality.
<!-- App.vue -->
<template>
<div>
<h1>How to Create Autocomplete Search in Vue JS - Vidvatek</h1>
<AutocompleteSearch />
<!-- Other components and content -->
</div>
</template>
<script>
import AutocompleteSearch from './components/AutocompleteSearch.vue';
export default {
components: {
AutocompleteSearch,
},
};
</script>
Congratulations! You've successfully implemented an autocomplete search feature in your Vue.js application. By following these steps, you've made your app more user-friendly and interactive.
Happy coding!
You might also like:
- Read Also: Laravel 10 Toastr Notification Example
- Read Also: How to Create Autocomplete Search in React
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide