Complete Select Box Solution For Vue.js 3 – next-select

Description:

next-select is a Vue.js component to provides a complete select box solution for Vue.js 3+ applications.

Features live filtering, dynamic options rendering, multi-select, tagging input, and much more.

How to use it:

1. Import the next-select.

import { reactive, ref, createApp } from 'vue'
import VueSelect from 'vue-next-select'
import 'vue-next-select/dist/index.min.css'

2. Create a single select box.

const { ref, createApp } = Vue
const singleSelect = createApp({
  name: 'app',
  setup() {
    const model = ref(null)
    const options = ref([
      'Select option',
      'Option',
      'Mulitple',
      'Searchable',
      'Taggable',
      'Close on select',
      'Hide selected',
    ])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      close-on-select
      :min="1"
    ></vue-select>
    <pre>{{ model || 'null' }}</pre>
  `,
})
singleSelect.component('vue-select', VueNextSelect)
singleSelect.mount(document.querySelector('#single-select'))

3. Create a multi-select box.

const { ref, computed, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([
      { name: 'Vue.js', language: 'JavaScript' },
      { name: 'Rails', language: 'Ruby' },
      { name: 'Sinatra', language: 'Ruby' },
      { name: 'Laravel', language: 'PHP' },
      { name: 'Phoenix', language: 'Elixir' },
    ])
    const model = ref(['Sinatra', 'Vue.js'])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      multiple
      label-by="name"
      track-by="name"
      value-by="name"
      :max="2"
      placeholder="Pick some"
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#multiple-select'))

4. Enable the live search functionality on the select box.

const { ref, computed, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([
      { name: 'Vue.js', language: 'JavaScript' },
      { name: 'Rails', language: 'Ruby' },
      { name: 'Sinatra', language: 'Ruby' },
      { name: 'Laravel', language: 'PHP' },
      { name: 'Phoenix', language: 'Elixir' },
    ])
    const model = ref(options.value[0])
    const searchInput = ref('')
    const hanldeSearchInput = event => {
      searchInput.value = event.target.value
    }
    const visibleOptions = computed(() => {
      const re = new RegExp(searchInput.value)
      return options.value.filter(option => re.test(option.name))
    })
    return {
      model,
      options,
      hanldeSearchInput,
      visibleOptions,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      :visible-options="visibleOptions"
      label-by="name"
      track-by="name"
      searchable
      clear-on-select
      @search-input="hanldeSearchInput"
    ></vue-select>
    <pre>{{ model || 'null' }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#select-with-search'))

5. Create a tag input.

const getCountryList = async name => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `https://restcountries.eu/rest/v2/name/${name}`)
    xhr.send()
    xhr.onloadend = () => {
      try {
        resolve(JSON.parse(xhr.response).map(info => info.name))
      } catch (error) {
        resolve([])
      }
    }
  })
}
const { ref, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([
      { name: 'Vue.js', language: 'JavaScript' },
      { name: 'Rails', language: 'Ruby' },
      { name: 'Sinatra', language: 'Ruby' },
      { name: 'Laravel', language: 'PHP' },
      { name: 'Phoenix', language: 'Elixir' },
    ])
    const model = ref(['Vue.js', 'Rails', 'Phoenix'])
    return {
      model,
      options,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      multiple
      taggable
      hide-selected
      label-by="name"
      track-by="name"
      value-by="name"
      collapse-tags
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#tagging'))

6. Create an asynchronous select.

const getCountryList = async name => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `https://restcountries.eu/rest/v2/name/${name}`)
    xhr.send()
    xhr.onloadend = () => {
      try {
        resolve(JSON.parse(xhr.response).map(info => info.name))
      } catch (error) {
        resolve([])
      }
    }
  })
}
const { ref, createApp } = Vue
const app = createApp({
  name: 'app',
  setup() {
    const options = ref([])
    const visibleOptions = ref([])
    const model = ref([])
    const loadingCount = ref(0)
    const searchInput = ref('')
    const handleSearchInput = async event => {
      searchInput.value = event.target.value
      if (searchInput.value === '') {
        visibleOptions.value = model.value
        return
      }
      ++loadingCount.value
      const currentSearchInput = searchInput.value
      const foundOptions = await getCountryList(searchInput.value)
      if (currentSearchInput === searchInput.value) {
        options.value = model.value.concat(foundOptions)
        options.value = Array.from(new Set(options.value))
        visibleOptions.value = foundOptions
      }
      --loadingCount.value
    }
    return {
      model,
      options,
      visibleOptions,
      loadingCount,
      handleSearchInput,
    }
  },
  template: `
    <vue-select
      v-model="model"
      :options="options"
      :visible-options="visibleOptions"
      multiple
      taggable
      searchable
      :min="3"
      @search-input="handleSearchInput"
      :loading="loadingCount !== 0"
    ></vue-select>
    <pre>{{ model }}</pre>
  `,
})
app.component('vue-select', VueNextSelect)
app.mount(document.querySelector('#asynchronous-select'))

Preview:

Complete Select Box Solution For Vue.js 3 - next-select

Changelog:

v2.1.1 (04/04/2021)

  • Bug Fixes

v2.1.0 (03/30/2021)

  • Added group support

v2.0.1 (03/27/2021)

  • Bug Fixes

v1.3.6 (03/24/2021)

  • Bug Fixes

v1.3.5 (03/22/2021)

  • mousemove should be triggered on custom template

v1.3.4 (03/22/2021)

  • Add min-height for empty label

v1.3.3 (03/20/2021)

  • Bug Fixes

v1.3.0 (03/18/2021)

  • filter options by label by default
  • implement disabled option
  • select with highlight item

v1.2.1 (03/09/2021)

  • Fixed: label may be a number

v1.2.0 (03/07/2021)

  • expose version

v1.1.0 (03/07/2021)

  • implement clear-on-close prop
  • show not allow cursor when it cannot add or remove
  • input should change color when disabled
  • input should display not allow cursor when disabled

v1.0.2 (03/02/2021)

  • Update

v1.0.0 (02/11/2021)

  • expose empty-model-value

v0.2.0 (02/05/2021)

  • update package

v0.1.3 (12/08/2020)

  • fix: wrong css

v0.1.2 (12/06/2020)

  • update

v0.1.1 (11/21/2020)

  • update

v0.0.20 (11/15/2020)

  • feat: display selection info

Download Details:

Author: iendeavor

Live Demo: /demo/complete-select-box-next/

Download Link: https://github.com/iendeavor/vue-next-select/archive/master.zip

Official Website: https://github.com/iendeavor/vue-next-select

Install & Download:

# NPM
$ npm i vue-next-select --save

You Might Be Interested In:

Add Comment