Vue js 2 Autocomplete Component

Today, We want to share with you Vue js 2 Autocomplete Component.In this post we will show you v-autocomplete, hear for Create Your Own Autocomplete Using Vue.js 2 we will give you demo and example for implement.In this post, we will learn about Autocomplete Field using Vue.js with an example.

Vue js 2 Autocomplete Component

There are the Following The simple About Vue js 2 Autocomplete Component Full Information With Example and source code.

Free Live Chat for Any Issue

As I will cover this Post with live Working example to develop vue js autocomplete from database, so the vue autocomplete textarea for this example is following below.

Simple vue-cli To install

vue init webpack autocomplete-v2
cd autocomplete-v2 && npm install
npm run dev

interface/usage of the component

<autocomplete :suggestions="suggestions" v-model="selection">
</autocomplete>

Autocomplete.vue

<script>
export default {

  props: {

    value: {
      type: String,
      required: true
    },

    suggestions: {
      type: Array,
      required: true
    }

  }

  // data section here
}
</script>

define the template section

<template>
    <div style="position:relative" v-bind:class="{'open':openSuggestion}">
        <input class="form-control" type="text" :value="value" @input="updateValue($event.target.value)"
          @keydown.enter = 'enter'
          @keydown.down = 'down'
          @keydown.up = 'up'
        >
        <ul class="dropdown-menu" style="width:100%">
            <li v-for="(suggestion, index) in matches"
                v-bind:class="{'active': isActive(index)}"
                @click="suggestionClick(index)"
            >
              <a href="#">{{ suggestion.category }} <small>{{ suggestion.items }}</small>
              </a>
            </li>
        </ul>
    </div>
</template>

Computed Properties

 computed: {
   // Filtering the suggestion based on the input
   matches () {
     return this.suggestions.filter((obj) => {
       return obj.category.indexOf(this.value) >= 0
     })
   },

   openSuggestion () {
     return this.selection !== '' &&
            this.matches.length !== 0 &&
            this.open === true
   }

 },

vuejs methods section

methods: {

  // Triggered the input event to cascade the updates to 
  // parent component
  updateValue (value) {
    if (this.open === false) {
      this.open = true
      this.current = 0
    }
    this.$emit('input', value)
  },

  // When enter key pressed on the input
  enter () {
    this.$emit('input', this.matches[this.current].category)
    this.open = false
  },

  // When up arrow pressed while suggestions are open
  up () {
    if (this.current > 0) {
      this.current--
    }
  },

  // When down arrow pressed while suggestions are open
  down () {
    if (this.current < this.matches.length - 1) {
      this.current++
    }
  },

  // For highlighting element
  isActive (index) {
    return index === this.current
  },

  // When one of the suggestion is clicked
  suggestionClick (index) {
    this.$emit('input', this.matches[index].category)
    this.open = false
  }

}

component from the parent component

<template>
  <div id="app" class="container">
    <autocomplete :suggestions="suggestions" v-model="selection">
    </autocomplete>
  </div>
</template>

<script>
import Autocomplete from './components/Autocomplete'

export default {

  name: 'app',

  components: {
    Autocomplete
  },

  data () {
    return {
      selection: '',
      suggestions: [
        { category: 'Bhakti', items: 'Krtisdemo' },
        { category: 'Elect', items: 'TaviMasaj' },
        { category: 'Sports', items: 'Dotball' },
        { category: 'Cloths', items: 'West Dev' },
        { category: 'Shose', items: 'Mobile' }
      ]
    }
  }

}
</script>

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read This ๐Ÿ‘‰   Vuejs autocomplete search with typeahead js

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js 2 Autocomplete Component.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.