Vue-advanced-search NPM

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