Vue Selectize

# Tagging

Tags:
neat
awesome
Current Value: [ "neat", "awesome" ]
<template>
    <div>
        <div>Tags:</div>
        <v-selectize :options="options" v-model="selected" multiple/>
        <div>Current Value: {{ selected }}</div>
    </div>
</template>

<script>
import VSelectize from '@isneezy/vue-selectize'
export default {
  name: 'tagging',
  data: () => ({
    options: ['neat', 'awesome'],
    selected: ['neat', 'awesome']
  }),
  components: {VSelectize}
}
</script>

# Email Contacts

Email:
Current Value:

This demonstrates two main things:

  1. custom item and option rendering
  2. item creation on-the-fly. Try typing a valid and invalid email address.
<template>
    <div>
        <div>Email:</div>
        <v-selectize :options="options" @search="text = $event" v-model="selected" :create-item="maybeCreate()" multiple placeholder="Pick some people..." keyBy="email"
                     label="name"
                     :keys="['name', 'email']">
            <template slot="item" slot-scope="{item}">{{item.name}} <{{item.email}}></template>
            <template slot="option" slot-scope="{option}">
                <label>{{ option.name }}</label>
                <span>{{ option.email }}</span>
            </template>
        </v-selectize>
        <div>Current Value: {{ selected }}</div>
    </div>
</template>

<script>
  import VSelectize from '@isneezy/vue-selectize'

  const REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
    '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)'
  export default {
    name: 'email-contacts',
    data: () => ({
      text: '',
      options: [
        {name: 'Brian Reavis', email: 'brian@thirdroute.com'},
        {name: 'Nikola Tesla', email: 'nicola@tesla.com'},
        {email: 'someone@gmail.com'}
      ],
      selected: null
    }),
    methods: {
      maybeCreate () {
        const regex = new RegExp('^' + REGEX_EMAIL + '$', 'i')
        const match = this.text.match(regex)
        if (match) return this.createContact
        return false
      },
      createContact (email) {
        const contact = {email}
        this.options.push(contact)
        return contact
      }
    },
    components: {VSelectize}
  }
</script>

<style scoped>
    label, span{
        display: block;
    }
</style>

# Single Item Select

Beast:
Current Value: []

The most vanilla of examples.

<template>
    <div>
        <div>Beast:</div>
        <v-selectize :options="options" v-model="selected" placeholder="Select a person"/>
        <div>Current Value: {{ selected }}</div>
    </div>
</template>

<script>
import VSelectize from '@isneezy/vue-selectize'
export default {
  name: 'single-item-select',
  data: () => ({
    options: ['Chuck Testa', 'Nikola Tesla', 'Sage Cattabriga-Alosa'],
    selected: []
  }),
  components: {VSelectize}
}
</script>

# Country Selector

Country:
Current Value:

A good example of:

  1. support for international characters (diacritics) and
  2. how items are scored and sorted. Try typing "islands", for instance.
<template>
    <div>
        <div>Country:</div>
        <v-selectize :options="options" v-model="selected" key-by="id" label="name" :keys="['name', 'id']"/>
        <div>Current Value: {{ selected }}</div>
    </div>
</template>

<script>
import VSelectize from '@isneezy/vue-selectize'
import countries from './countries'
export default {
  name: 'country-selector',
  data: () => ({
    options: countries,
    selected: null
  }),
  components: {VSelectize}
}
</script>

# Limit Dropdown option

10 Countries:
Current Value:

This demo limits the dropdown to have only 10 contries listed.

<template>
    <div>
        <div>10 Countries:</div>
        <v-selectize :options="options" v-model="selected" :limit="limit" key-by="id" label="name" :keys="['name', 'id']"/>
        <div>Current Value: {{ selected }}</div>
    </div>
</template>

<script>
import VSelectize from '@isneezy/vue-selectize'
import countries from './countries'
export default {
  name: 'limit-dropdown-options',
  data: () => ({
    options: countries,
    selected: null,
    limit: 10
  }),
  components: {VSelectize}
}
</script>

# Remote Source — Github

Tags:
Current Value:

This example shows how to integrate third-party data from the GitHub API.

<template>
    <div>
        <div>Tags:</div>
        <v-selectize key-by="url" label="name" :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
            <template v-slot:option="{ option }">
              <div class="text-base">
                <i class="fa fa-code-fork"></i>
                <b class="ml-1">{{ option.name }}</b>
                <small class="ml-1">by {{ option.owner }}</small>
              </div>
              <div class="text-gray-500">{{ option.description }}</div>
              <div class="text-xs">
                <span>{{ option.language }}</span>
                <span class="ml-2"><b>{{ option.watchers }}</b> watchers</span>
                <span class="ml-2"><b>{{ option.forks }}</b> forks</span>
              </div>
            </template>
        </v-selectize>
        <div>Current Value: {{ url }}</div>
    </div>
</template>

<script>
import VSelectize from '@isneezy/vue-selectize'
import debounce from 'lodash.debounce'
export default {
  name: 'remote-git-hub',
  data: () => ({
    options: [
      {
        "name": "vue-selectize",
        "owner": "isneezy",
        "description": "Vanila Vue.js component that mimics Selectize behaviour (no need jquery dependency)",
        "language": "Vue",
        "watchers": 30,
        "forks": 5,
        "url": "https://github.com/isneezy/vue-selectize"
      }
    ],
    selected: null
  }),
  computed: {
    url() {
      return this.selected ? this.selected.url : null
    }
  },
  methods: {
    search: debounce (function (text, done) {
      if (text.length < 3) done()
      fetch(`https://api.github.com/legacy/repos/search/${text}`).then(response => {
        return response.json()
      }).then(data => {
        this.options = data.repositories || []
        done()
      }).catch(done)
    }, 500)
  },
  components: {VSelectize}
}
</script>

# Remote Source — Rotten Tomatoes

Movie:
Current vaue: ""

This demo shows how to integrate third-party data from the Rotten Tomatoes API. Try searching for "Iron Man". Note: if this doesn't work, it's because the API limit has been reached... try again later 😄

<template>
  <div>
    <div class="my-2">Movie:</div>
    <VSelectize :options="movies" :searchFn="search" v-model="selected" disableSearch key-by="id" label="title" :create-item="false">
      <template v-slot:option="{ option }">
        <div class="flex overflow-hidden">
          <img class="w-16" style="background: rgba(0,0,0,0.04);" :src="option.posters.thumbnail" alt="">
          <div class="flex-1 pl-2">
            <div class="truncate text-base font-bold">{{ option.title }}</div>
            <div class="mt-2 flex flex-wrap">
              <span class="px-1 rounded text-xs text-white bg-gray-500">
                <i class="fa fa-exclamation-circle mr-1"></i>
                {{ option.mpaa_rating }}
              </span>
              <span class="ml-1 px-1 rounded text-xs text-white bg-green-500">
                <i class="fa fa-clock-o mr-1"></i>
                {{ option.runtime }}
              </span>
            </div>
            <div class="truncate mt-1">{{ option.synopsis || 'No synopsis available at this time.' }}</div>
            <div class="truncate text-sm text-gray-500">
              <template v-if="option.abridged_cast.length">
                <span>Starring </span>
                <span class="text-gray-700">
                {{ option.abridged_cast.map(act => act.name).join(', ') }}
              </span>
              </template>
              <template v-else>Actors unavailable</template>
            </div>
          </div>
        </div>
      </template>
    </VSelectize>
    <div class="py-2">Current vaue: "{{ selected ? selected.title : null }}"</div>
  </div>
</template>

<script>
  import VSelectize from '@isneezy/vue-selectize'
  import debounce from 'lodash.debounce'
  export default {
    name: 'RemoteRottenTomatoes',
    components: { VSelectize },
    data: () => ({
      movies: [],
      selected: null
    }),
    methods: {
      search:  debounce (function (text, done) {
        if (text.length < 3) done()
        fetch(`https://www.rottentomatoes.com/api/private/v1.0/movies.json?q=${text}&page_limit=10`).then(response => {
          return response.json()
        }).then(data => {
          this.movies = data.movies || []
          done()
        }).catch(done)
      }, 300)
    }
  }
</script>

<style scoped>

</style>

# Nuxt.js integration

Vue-selectize example with Nuxt.js

← Props →