vue2-advanced-search

Forked version vue-advanced-search by @darkfriend

Features:

• Autocomplete search
• Single select
• Multiple select

Install & basic usage

npm install vue2-advanced-search -S

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

Example 1: Autocomplete search

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

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

Example 2: Multiple select with search

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

<script>
  import AdvancedSearch from 'vue2-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="vue2-advanced-search/dist/AdvancedSearch.css"></style>

Example 3: Autocomplete search (async component)

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

<script>
  export default {
    components: {
        AdvancedSearch: () => import('vue2-advanced-search'),
    },
    data () {
      return {
        model: null,
        options: [
            { label: 'label1', value: 'value1' },
            { label: 'label2', value: 'value2' }
        ]
      }
    }
  }
</script>
<style src="vue2-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