mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Let user add options from search
This commit is contained in:
@@ -251,7 +251,34 @@
|
|||||||
* @type {Function}
|
* @type {Function}
|
||||||
* @default {null}
|
* @default {null}
|
||||||
*/
|
*/
|
||||||
onChange: Function
|
onChange: Function,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable/disable creating options from searchInput.
|
||||||
|
* @type {Boolean}
|
||||||
|
*/
|
||||||
|
tagable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User defined function for adding Options
|
||||||
|
* @type {Function}
|
||||||
|
*/
|
||||||
|
createOption: {
|
||||||
|
type: Function,
|
||||||
|
default: function (value) {
|
||||||
|
let firstOption = this.options[0]
|
||||||
|
if (firstOption && typeof firstOption === 'object' ) {
|
||||||
|
value = {
|
||||||
|
value
|
||||||
|
}
|
||||||
|
value[this.label] = value
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
@@ -267,13 +294,15 @@
|
|||||||
this.onChange && val !== old ? this.onChange(val) : null
|
this.onChange && val !== old ? this.onChange(val) : null
|
||||||
},
|
},
|
||||||
options() {
|
options() {
|
||||||
this.$set('value', this.multiple ? [] : null)
|
if (!this.optionAdded) {
|
||||||
|
this.$set('value', this.multiple ? [] : null)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
multiple( val ) {
|
multiple( val ) {
|
||||||
this.$set('value', val ? [] : null)
|
this.$set('value', val ? [] : null)
|
||||||
},
|
},
|
||||||
filteredOptions() {
|
filteredOptions() {
|
||||||
this.typeAheadPointer = 0;
|
this.typeAheadPointer = 0
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -351,7 +380,7 @@
|
|||||||
return this.value.indexOf(option) !== -1
|
return this.value.indexOf(option) !== -1
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.value === option;
|
return this.value === option
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -378,7 +407,7 @@
|
|||||||
getOptionLabel( option ) {
|
getOptionLabel( option ) {
|
||||||
if( typeof option === 'object' ) {
|
if( typeof option === 'object' ) {
|
||||||
if( this.label && option[this.label] ) {
|
if( this.label && option[this.label] ) {
|
||||||
return option[this.label];
|
return option[this.label]
|
||||||
} else if( option.label ) {
|
} else if( option.label ) {
|
||||||
return option.label
|
return option.label
|
||||||
}
|
}
|
||||||
@@ -412,6 +441,14 @@
|
|||||||
typeAheadSelect() {
|
typeAheadSelect() {
|
||||||
if( this.filteredOptions[ this.typeAheadPointer ] ) {
|
if( this.filteredOptions[ this.typeAheadPointer ] ) {
|
||||||
this.select( this.filteredOptions[ this.typeAheadPointer ] );
|
this.select( this.filteredOptions[ this.typeAheadPointer ] );
|
||||||
|
} else if (this.tagable && this.search.length){
|
||||||
|
let option = this.createOption(this.search)
|
||||||
|
this.optionAdded = true
|
||||||
|
this.options.unshift(option)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.optionAdded = false
|
||||||
|
this.select(option)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if( this.clearSearchOnSelect ) {
|
if( this.clearSearchOnSelect ) {
|
||||||
|
|||||||
Reference in New Issue
Block a user