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.
Related: How to Install and Setup Vue.js App
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:
Leave a Reply