vue-bulma-typeahead v0.0.7

Vue Bulma Typeahead

A simple Vue.js 2 Bulma CSS-styled component with a typeahead dropdown

View the demo.

Installation

Install via NPM:

npm install vue-bulma-typeahead --save

Usage

Props

Example

Use like below. See the example code in the demo.

<template>

  <div class="container">
    <label class="label">U.S. State</label>
    <p class="control has-icons-left">

      <typeahead :source="source" :onSelect="onSelect" :onChange="onChange" :limit="5"></typeahead>

      <span class="icon is-small is-left">
        <i class="fa fa-magic"></i>
      </span>
    </p>
  </div>

</template>

<script>
import Typeahead from 'vue-bulma-typeahead'

export default {
  name: 'demo',
  components: { Typeahead },
  data () {
    return {
      source: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
      'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
      'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon',
      'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
      'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia',
      'Wisconsin', 'Wyoming'],
      value: ''
    }
  },
  methods: {
    onSelect (value) {
      this.value = value
    },
    onChange (value) {
      this.value = value
    }
  }
}
</script>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.