diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts index 66259614df..358a83b387 100755 --- a/src/components/autocomplete/AutoComplete.d.ts +++ b/src/components/autocomplete/AutoComplete.d.ts @@ -12,6 +12,7 @@ declare class AutoComplete extends Vue { delay?: number; ariaLabelledBy?: string; appendTo?: string; + forceSelection?: boolean; $emit(eventName: 'input', value: any): this; $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this; $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this; diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue index fb1ccda95d..325ce354af 100755 --- a/src/components/autocomplete/AutoComplete.vue +++ b/src/components/autocomplete/AutoComplete.vue @@ -79,6 +79,10 @@ export default { appendTo: { type: String, default: null + }, + forceSelection: { + type: Boolean, + default: false } }, timeout: null, @@ -401,6 +405,30 @@ export default { } } }, + onChange(event) { + if (this.forceSelection) { + let valid = false; + let inputValue = event.target.value.trim(); + + if (this.suggestions) { + for (let item of this.suggestions) { + let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item; + if (itemValue && inputValue === itemValue.trim()) { + valid = true; + this.selectItem(event, item); + break; + } + } + } + + if (!valid) { + this.$refs.input.value = ''; + this.inputTextValue = ''; + this.$emit('clear'); + this.$emit('input', null); + } + } + }, isSelected(val) { let selected = false; if (this.value && this.value.length) { @@ -438,7 +466,8 @@ export default { input: this.onInput, focus: this.onFocus, blur: this.onBlur, - keydown: this.onKeyDown + keydown: this.onKeyDown, + change: this.onChange }; }, containerClass() { diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue index 43e17386ff..d695f86ebe 100755 --- a/src/views/autocomplete/AutoCompleteDemo.vue +++ b/src/views/autocomplete/AutoCompleteDemo.vue @@ -13,8 +13,8 @@
Basic
-
Dropdown and Templating
- +
Dropdown, Templating and Force Selection
+