diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue index 44ffbc1..5b57a7e 100644 --- a/src/components/mdInputContainer/mdAutocomplete.vue +++ b/src/components/mdInputContainer/mdAutocomplete.vue @@ -4,7 +4,8 @@ @blur="onBlur"> + ref="menu" + class="md-autocomplete-menu"> { + let data = response || response.data || response.body; + + data = this.prepareResponseData ? + this.prepareResponseData(data) : + data; + this.items = this.limit ? + data.slice(0, this.limit) : + data; + + this.loading = false; + + this.toggleMenu(); + }); + }, onFocus() { if (this.parentContainer) { this.parentContainer.isFocused = true; @@ -127,6 +146,13 @@ this.setParentValue(value); this.updateValues(value); }, + setSearchButton() { + this.searchButton = this.parentContainer.$el.querySelector('[md-autocomplete-search]'); + + if (this.searchButton) { + this.searchButton.addEventListener('click', this.makeFetchRequest); + } + }, update() { if (!this.query && !this.list.length) { return this.reset(); @@ -140,23 +166,7 @@ const queryObject = { [this.queryParam]: this.query }; - this.fetch(queryObject) - .then((response) => { - if (this.query) { - let data = response || response.data || response.body; - - data = this.prepareResponseData ? - this.prepareResponseData(data) : - data; - this.items = this.limit ? - data.slice(0, this.limit) : - data; - - this.loading = false; - - this.toggleMenu(); - } - }); + return this.makeFetchRequest(queryObject); }, toggleMenu() { if (this.items.length) { @@ -170,6 +180,11 @@ this.parentContainer.inputLength = newValue ? newValue.length : 0; } }, + beforeDestroy() { + if (this.searchButton) { + this.searchButton.removeEventListener('click', this.makeFetchRequest); + } + }, mounted() { this.$nextTick(() => { this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container'); @@ -181,6 +196,7 @@ this.query = this.value; this.verifyProps(); + this.setSearchButton(); this.setParentDisabled(); this.setParentRequired(); diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss index 027051a..3c9e696 100644 --- a/src/components/mdInputContainer/mdInputContainer.scss +++ b/src/components/mdInputContainer/mdInputContainer.scss @@ -135,6 +135,10 @@ $input-size: 32px; } } +.md-theme-default.md-input-container .md-autocomplete .md-icon:not(.md-icon-search):after { + height: 0; +} + .md-input-container { &.md-input-placeholder { label {