Create search controls with auto suggest using vue instant

vue-instant

This Vue component allows you to implement search with suggestions as the user types. Bellow is an example which is using the MovieDB API and display search results from it.

Example

Installation

npm install --save vue-instant

Usage

<template>
  <div id="app">
    <vue-instant id="styles" @input="changed" v-model="value" :suggestion-attribute="suggestionAttribute":suggestions="suggestions"></vue-instant>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      value: '',
      suggestionAttribute: 'original_title',
      suggestions: []
    }
  },
  methods: {
    changed: function () {
      var that = this
      this.suggestions = []
      axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
        .then(function (response) {
          response.data.results.forEach(function (a) {
            that.suggestions.push(a)
          })
        })
    }
  }
}
</script>

Calls to API are done via Axios.

You can see more options for for attributes, events, and customization of the search box, at documentation.

The source code is available on GiHub along with this example. By Santiago Blanco.