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