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

Install & Download:

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

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.10.5 (12/07/2022)

update

v2.10.4 (03/24/2022)

update

v2.10.3 (03/16/2022)

Bugfix

v2.10.2 (11/17/2021)

Bug Fix: if not specified, fallback to non-group options

v2.10.1 (08/31/2021)

Bug Fixes

v2.9.0 (08/05/2021)

add autocomplete field support
add label slot

v2.8.0 (07/26/2021)

allow to pass attrs

v2.7.1 (07/14/2021)

add prevent modifier when hitting “enter” in dropdown

v2.7.0 (06/29/2021)

expose remove function for tag slot
prevent blur when click on children

v2.6.0 (06/12/2021)

a11y
add a11y-disabled
expose toggle event
home/end kbd interaction
type-ahead kbd interaction
Bug Fixes

v2.5.0 (06/05/2021)

expose maxHeight prop
expose openDirection prop
Bug Fixes

v2.4.3 (06/04/2021)

Fixed: the dropdown should automaticlly scroll to selected option

v2.4.2 (06/04/2021)

Fixed: computed options prop not works

v2.4.1 (05/30/2021)

escape searching string

v2.4.0 (05/19/2021)

emit consistent event name focus and blur
prevent infinite loop

v2.3.1 (05/05/2021)

Bug Fixes

v2.3.0 (05/03/2021)

fix: it should only fire removed event when there is one selected option

v2.2.0 (05/01/2021)

Implement a11y
Bugfixes

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

Prev Next

Vue Script

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

Install & Download:

Description:

How to use it:

Preview:

Changelog:

Add Comment Cancel Reply

Install & Download:

Description:

How to use it:

Preview:

Changelog:

More Like This

Add Comment Cancel Reply