v-suggestions

suggestions with custom templates

Installation

# npm
npm install v-suggestions

# yarn
yarn add v-suggestions

import Suggestions from 'v-suggestions'
import 'v-suggestions/dist/v-suggestions.css' // you can import the stylesheets also (optional)
Vue.component('suggestions', Suggestions)

Component supports Vue 2.1.0+ version. v-suggetions uses slot-scope based templates for customizing suggestions.

Demo

Online demo is also available!

User Guide

Simple Example

<suggestions
    v-model="query"
    :options="options"
    :onInputChange="onCountryInputChange">

 export default {
  data () {
    let countries = ['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa', 'AndorrA', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize']
    return {
      query: '',
      countries: countries,
      selectedCountry: null,
      options: {}
    }
  },
  methods: {
    onCountryInputChange (query) {
      if (query.trim().length === 0) {
        return null
      }
      // return the matching countries as an array
      return this.countries.filter((country) => {
        return country.toLowerCase().includes(query.toLowerCase())
      })
    },
    onCountrySelected (item) {
      this.selectedCountry = item
    },
    onSearchItemSelected (item) {
      this.selectedSearchItem = item
    }
  }
}

Ajax based results with custom template (Duckduckgo API)

<suggestions
  v-model="searchQuery"
  :options="searchOptions"
  :onItemSelected="onSearchItemSelected"
  :onInputChange="onInputChange">
  <div slot="item" slot-scope="props" class="single-item">
    <template v-if="props.item.Icon && props.item.Icon.URL">
      <div class="image-wrap" :style="{'backgroundImage': 'url('+ props.item.Icon.URL + ')' }"></div>
    </template>
    <span class="name">{{props.item.Text}}</span>
  </div>
</suggestions>

export default {
  data () {
    return {
      searchQuery: '',
      selectedSearchItem: null,
      options: {}
    }
  },
  methods: {
    onInputChange (query) {
      if (query.trim().length === 0) {
        return null
      }
      const url = `http://api.duckduckgo.com/?q=${query}&format=json&pretty=1`
      return new Promise(resolve => {
        axios.get(url).then(response => {
          const items = []
          response.data.RelatedTopics.forEach((item) => {
            if (item.Text) {
              items.push(item)
            } else if (item.Topics && item.Topics.length > 0) {
              item.Topics.forEach(topic => {
                items.push(topic)
              })
            }
          })
          resolve(items)
        })
      })
    },
    onSearchItemSelected (item) {
      this.selectedSearchItem = item
    }
  }
}

Custom key events

You can pass the @keyDown event to handle custom key events, e.g. hitting enter when no item was selected.

<suggestions
  v-model="searchQuery"
  :options="searchOptions"
  :onItemSelected="onSearchItemSelected"
  :onInputChange="onInputChange"
  @keyDown="onInputKeyDown"
>
</suggestions>