How To Use Syncfusion Autocomplete In Vue.js Application

Introduction

In this article, we will learn how to add Syncfusion autocomplete dropdown in the Vue.js application.

Prerequisites

• Basic knowledge of Vue.js 
• Visual Studio Code IDE should be installed on your system.
• Basic knowledge of HTML and CSS

Create Vue.js project

Create a Vue.js project by using the following command.

vue create directiveapp

Open the newly created project in Visual Studio Code and install Synfusion autocomplete dropdown library using the following command.

npm install @syncfusion/ej2-vue-dropdowns

Now go to the src folder and create a new component, 'Autocomplete.vue'. Add the following code to this component.

<template>
   <div>
      <div class="control-section">
         <div class="col-lg-12" style="height: 350px">
            <div id='content' style="margin: 0 auto; width:250px; padding-top: 30px">
               <ejs-autocomplete id='games' :dataSource='sportsData' :placeholder='waterMark'></ejs-autocomplete>
            </div>
         </div>
      </div>
   </div>
</template>
<script>
   import Vue from "vue";
   import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns";
   import * as data from './dataSource.json';
   
   Vue.use(AutoCompletePlugin);
   export default Vue.extend ({
       data: function() {
           return {
               waterMark: 'Search Name here',
               sportsData: data['sportsData']
           };
       }
   });
</script>
<style>
   @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
   @import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
   @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
   #app {
   color: #008cff;
   height: 40px;
   left: 35%;
   position: absolute;
   top: 35%;
   width: 30%;
   }
</style>

Inside this component, we have added a synfusion autocomplete dropdown in the template section. And Bind the data in the data source.

<div id='content' style="margin: 0 auto; width:250px; padding-top: 30px">
                  <ejs-autocomplete id='games' :dataSource='sportsData' :placeholder='waterMark'></ejs-autocomplete>
</div>

In the script section, we have import the synfusion autocomplete dropdown reference. Also, we import reference for the json file, which we created to add dummy data.

In the style section, we have import reference for Synfusion css files.

Now create a json file named dataSource.json to create some dummy data.

{
    "sportsData":[
    "Badminton", 
    "Basketball", 
    "Cricket",
    "Football", 
    "Golf", 
    "Gymnastics",
    "Hockey", 
    "Rugby", 
    "Snooker", 
    "Tennis" 
]
}

Now open App.vue and add the following code.

<template>
   <div id="app">
      <Autocomplete msg="Welcome to Your Vue.js App" />
   </div>
</template>
<script>
   import Autocomplete from './components/Autocomplete.vue'
   
   export default {
     name: 'App',
     components: {
       Autocomplete
     }
   }
</script>
<style>
   #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
   }
</style>

In the above code, we have added the reference of Autocomplete.vue component inside the app.vue file.

Now run the project using the 'npm run serve' command.

Now select a name from the dropdown.

Summary

In this article, we learned how to add Syncfusion autocomplete dropdown in the Vue.js application.