Simple Vue js Autocomplete Example [Reusable Component]

By Mohit Tanwani Last updated Jan 11, 2018

This article will guide you on how to create and use a reusable Vue js Autocomplete example in your Vue.js apps.

Nowadays, autocomplete is a necessary ingredient for any modern web application.

Also, it’s very crucial to choose a UI friendly autocomplete and create it as a reusable component that will help us to use it anywhere throughout the Vue.js app by putting a few lines of code.

So, let’s get started to create a simple Vue js autocomplete example.

Install Vue.js App

Note: You can skip this step, if you already have app installed and ready.

First of all, create a simple Vue.js app.

vue init webpack vue-js-autocomplete

Next, let’s go to the project and install the dependencies.

cd vue-js-autocomplete
npm install

Now, you’re ready to use the app.

Setup Vue js Autocomplete Example

Firstly, let’s install the Vue.js autocomplete in our app.

npm install vue2-autocomplete-js

After installation, we should import the Autocomplete component and necessary CSS in our main.js file.

import Autocomplete from 'vue2-autocomplete-js'
require('vue2-autocomplete-js/dist/style/vue2-autocomplete.css')

Now, let’s enable the use of autocomplete globally.

Vue.component('autocomplete', Autocomplete);

Finally, we just need to use autocomplete HTML element in our template file to go and use the autocomplete.

Note: I’ve use the static URL that provides the dummy JSON data. You can use data according to your need, just make sure that you provide the valid anchor and label.

<autocomplete
    url="https://jsonplaceholder.typicode.com/users"
    anchor="name"
    label="writer"
    :on-select="getData">
</autocomplete>

Now, you just need to run your app by using following command.

npm run dev

And you can open your app at https://www.thetechieshouse.com:8080

That’s it! It’s simple and reusable component as a Vue js autocomplete example.

Moreover, you can find the full code as below.

//Import Vue
import Vue from 'vue'
//Import app component
import App from './App'
//Import router
import router from './router'
//Import autocomplete
import Autocomplete from 'vue2-autocomplete-js'
//Import CSS 
require('vue2-autocomplete-js/dist/style/vue2-autocomplete.css')

//Global call for autocomplete
Vue.component('autocomplete', Autocomplete);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<template>
  <div id="app">
  <autocomplete
    url="https://jsonplaceholder.typicode.com/users"
    anchor="name"
    label="writer"
    :on-select="getData">
  </autocomplete>
  <div v-if="resultContent" :style="preStyle">
      <b>Selected Data:</b>
      {{ resultContent }}
  </div>
  </div>
</template>

<script>

  export default {
    name: 'app',
    data(){
      return {
        resultContent: ''
      }
    },
    methods: {
      getData(obj){
        this.resultContent = obj;
      }
    }
  };
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-js-autocomplete</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Note: I’ve coded autocomplete in App component but you can just use autocomplete in your any component throughout the app.

Furthermore, If you’re looking to use more options with your autocomplete, you can visit the vue2-autocomplete Github Repository.

Suggested:

Vue.js autocomplete

Simple Vue js Autocomplete Example [Reusable Component]

Install Vue.js App

Setup Vue js Autocomplete Example

Leave a Reply