vue-advanced-search

Features: * Autocomplete search * Single select * Multiple select
8,693 11
vue search autocomplete
Install
npm install vue-advanced-search
Latest Version:0.1.43
Vue:2
License:MIT
Last Updated:Dec 12, 2022
Links: GitHub  ·  npm
Maintainer: antonispat10

vue-advanced-search

Features:

  • Autocomplete search
  • Single select
  • Multiple select

Install & basic usage

npm install vue-advanced-search

Add the css into your project 
<style src="vue-advanced-search/dist/AdvancedSearch.css"></style>

Example 1: Autocomplete search

<template>
  <div>
    <advanced-search
      v-model="model"
      :options="options"
    >
    </advanced-search>
  </div>
</template>

<script>
  import Advanced-Search from 'vue-advanced-search'
  export default {
    components: { AdvancedSearch },
    data () {
      return {
        model: null,
        options: [
            { label: 'label1', value: 'value1' },
            { label: 'label2', value: 'value2' }
        ]
      }
    }
  }
</script>
<style src="vue-advanced-search/dist/AdvancedSearch.css"></style>

Example 2: Multiple select with search

<template>
  <div>
    <advanced-search
      v-model="model"
      :options="options"
      select
      multiple
    >
    </advanced-search>
  </div>
</template>

<script>
  import Advanced-Search from 'vue-advanced-search'
  export default {
    components: { AdvancedSearch },
    data () {
      return {
        model: null,
        options: [
            { label: 'label1', value: 'value1' },
            { label: 'label2', value: 'value2' },
            { label: 'label3', value: 'value3' }
        ]
      }
    }
  }
</script>
<style src="vue-advanced-search/dist/AdvancedSearch.css"></style>

Props

prop type default description
value String/Integer/Array/Object '' The selected value(s)
options Array [] Array of available options: If array of objects, label will be option.label
placeholder String 'Search' The placeholder attribute
selectMode Boolean false Enables input select
multiple Boolean false Enable multiple select

Events

event attributes description
input (value) triggers for any change to 'this.value'
select (value) triggers after selecting an option

Slots

slot description
input Slot for the input
label Slot for the label displayed
option Slot for custom option

Contributing


npm run serve

Related Packages

vue-search-select

A Vue.js search select form component

448,293 407
autocomplete search select vuejs
vue-search-select-css

A Vue.js search select form component that allows css customizations (based on v...

1,602 1
autocomplete search select vuejs
vue-suggest

Simple vue search component with autocomplete capabilities

7,625 9
autocomplete search vue search-as-you-type suggest
vue3-autocomplete

* Installation * Usage

10,928 31
autocomplete search vue select vue3 vuejs
@zbsearch/searchbox-vue

Accessible Vue 3 search box UI for ZBSearch

347 305
autocomplete search vue command palette searchbox zbsearch

Version History

Version Released Vue License
0.1.43 ^2.6.10 MIT
0.1.42 ^2.6.10 MIT
0.1.41 ^2.6.10 MIT
0.1.38 ^2.6.10 MIT
0.1.36 ^2.6.10 MIT