From cfd60ed7096d112edd99a4d3dce6a73d21e61875 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Tue, 14 Mar 2017 12:41:54 -0300
Subject: [PATCH 01/19] chips autocomplete

---
 .../mdChips/mdChipsAutocomplete.vue           | 390 ++++++++++++++++++
 1 file changed, 390 insertions(+)
 create mode 100644 src/components/mdChips/mdChipsAutocomplete.vue

diff --git a/src/components/mdChips/mdChipsAutocomplete.vue b/src/components/mdChips/mdChipsAutocomplete.vue
new file mode 100644
index 0000000..ebb9a7e
--- /dev/null
+++ b/src/components/mdChips/mdChipsAutocomplete.vue
@@ -0,0 +1,390 @@
+<template>
+  <div class="md-chips chips-autocomplete chips-autocomplete--expandable"
+    :class="[themeClass, classes]"
+    @focus="focusInputContainer">
+    <md-input-container @click.native="applyInputFocus">
+      <md-chip
+        v-for="chip in selectedChips"
+        :md-deletable="isDeletable"
+        :disabled="disabled"
+        @delete="deleteChip(chip)">
+				{{ chip[printAttribute] }}
+      </md-chip>
+      <md-input
+        v-show="!mdStatic"
+        v-model="query"
+        :type="mdInputType"
+        :placeholder="mdInputPlaceholder"
+        :id="inputId"
+        :name="mdInputName"
+        :disabled="disabled"
+        :required="required"
+        @input="update"
+        @keydown.native.delete="deleteLastChip"
+        @keydown.native.prevent.enter="hit"
+        @keydown.native.prevent.186="hit"
+        @keydown.down="down"
+        @keydown.up="up"
+        tabindex="0"
+        ref="input">
+      </md-input>
+      <ul class="md-list md-theme-default ChipsAutocomplete__List"
+        ref="resultList"
+        v-if="items && items.length">
+        <li class="md-list-item md-menu-item md-option ChipsAutocomplete__Item"
+          :class="{
+	          'active': this.current === index,
+	        }"
+          v-for="(item, index) in items"
+          @mousedown="hit"
+          @mousemove="setActive(index)">
+          <md-button @click.native="hit"
+            @keydown.native.delete="deleteLastChip"
+            @keydown.native.prevent.enter="hit"
+            @keydown.native.prevent.186="hit"
+            @mousemover="setActive(index)">
+            {{ item[printAttribute] }}
+          </md-button>
+        </li>
+      </ul>
+    </md-input-container>
+  </div>
+</template>
+<script>
+  import getClosestVueParent from '../../core/utils/getClosestVueParent';
+  import theme from '../../core/components/mdTheme/mixin';
+  import uniqueId from '../../core/utils/uniqueId';
+
+  import {
+    copyObject,
+    getClosestThemedParent,
+  } from '../common/functions/helpers';
+
+  export default {
+    name: 'ChipsAutocomplete',
+    props: {
+      disabled: Boolean,
+      fetchFunction: {
+        type: Function,
+      },
+      mdInputId: String,
+      mdInputName: String,
+      mdInputPlaceholder: {
+        type: String,
+        default: 'Buscar por algo...',
+      },
+      mdInputType: {
+        type: String,
+        default: 'text',
+      },
+      mdMax: {
+        type: Number,
+        default: Infinity,
+      },
+      mdStatic: Boolean,
+      mdTheme: String,
+      printAttribute: {
+        type: String,
+        default() { return 'nome'; },
+      },
+      queryParam: {
+        type: String,
+        default() { return 'q'; },
+      },
+      required: Boolean,
+      saveOne: Boolean,
+      source: {
+        type: Array,
+        default() { return []; },
+      },
+      url: {
+        type: String,
+        default() {
+          return 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search';
+        },
+      },
+      value: {
+        type: Array,
+        default() { return []; },
+      },
+    },
+    data() {
+      return {
+        closestThemedParent: false,
+        current: -1,
+        inputId: this.mdInputId || `chips-${uniqueId()}`,
+        items: [],
+        query: null,
+        selectedChips: this.value,
+      };
+    },
+    watch: {
+      value(value) {
+        this.selectedChips = value;
+      },
+      source(newVal) {
+        this.mergeSource(newVal);
+      },
+    },
+    computed: {
+      classes() {
+        return {
+          'md-disabled': this.disabled,
+          'md-static': this.mdStatic,
+        };
+      },
+      isDeletable() {
+        return !(this.mdStatic || this.selectedChips.length === 1);
+      },
+      themeClass() {
+        if (this.mdTheme) {
+          return `md-theme-${this.mdTheme}`;
+        }
+        let theme = this.closestThemedParent.mdTheme;
+        if (!theme) {
+          theme = (this.closestThemedParent) ?
+            this.closestThemedParent.mdName :
+            theme = this.$material.currentTheme;
+        }
+        return `md-theme-${theme}`;
+      },
+    },
+    methods: {
+      addChip() {
+        if (this.query && this.selectedChips.length < this.mdMax) {
+          const value = this.query.trim();
+          if (this.selectedChips.indexOf(value) < 0) {
+            this.selectedChips.push(value);
+            this.query = null;
+            this.$emit('input', this.selectedChips);
+            this.$emit('change', this.selectedChips);
+            this.applyInputFocus();
+          }
+        }
+      },
+      addSelectChip(value) {
+        if (this.findChipIndex(value) < 0) {
+          this.selectedChips.push(value);
+          this.query = null;
+          this.$emit('input', this.selectedChips);
+          this.$emit('change', this.selectedChips);
+          this.applyInputFocus();
+        }
+      },
+      applyInputFocus() {
+        this.$nextTick(() => {
+          this.$refs.input.$el.focus();
+        });
+      },
+      callFetch() {
+        return (this.fetchFunction) ?
+        this.fetchFunction(this.queryParamObject())
+          .then(response => this.handleRequest(response)) :
+        this.fetch()
+          .then(response => this.handleRequest(response));
+      },
+      deleteChip(chip) {
+        const index = this.selectedChips.indexOf(chip);
+        if (index >= 0) {
+          this.selectedChips.splice(index, 1);
+        }
+        this.$emit('delete', chip);
+        this.$emit('change', this.selectedChips);
+        this.applyInputFocus();
+      },
+      deleteLastChip() {
+        if (!this.query) {
+          this.selectedChips.pop();
+          this.$emit('change', this.selectedChips);
+          this.applyInputFocus();
+        }
+      },
+      down() {
+        if ((this.current + 1) >= this.selectedChips.length) {
+          this.current = 0;
+          return;
+        }
+        this.current += 1;
+      },
+      fetch() {
+        if (!this.url) {
+          console.warn('You need to set the `src` property', this); // eslint-disable-line
+          return this;
+        }
+        const src = this.queryParam
+          ? this.url
+          : this.url + this.query;
+        const params = this.queryParam
+          ? Object.assign({ [this.queryParam]: this.query }, this.data)
+          : this.data;
+        return this.$http.get(src, { params });
+      },
+      findChipIndex(chip) {
+        if (typeof chip === 'string') {
+          return this.selectedChips.indexOf(chip);
+        }
+        const selectedChip = (chip.hasOwnProperty('id')) ?
+          this.selectedChips.find(el => el.id === chip.id) :
+          this.selectedChips.indexOf(chip);
+        if (typeof selectedChip !== 'number') {
+          return (!selectedChip) ?
+          -1 :
+          this.selectedChips.indexOf(selectedChip);
+        }
+        return selectedChip;
+      },
+      focusInputContainer() {
+        this.$refs.input.$el.focus();
+      },
+      handleRequest(response) {
+        if (this.query) {
+          let data = (response.data.hasOwnProperty('length')) ?
+            response.data :
+            response.data.resposta;
+
+          data = this.prepareResponseData ?
+            this.prepareResponseData(data) :
+            data;
+
+          this.items = this.limit ?
+            data.slice(0, this.limit) :
+            data;
+
+          this.current = -1;
+          this.loading = false;
+          if (this.selectFirst) {
+            this.down();
+          }
+        }
+        return response;
+      },
+      hit() {
+        if (this.current !== -1 && this.items && this.items[this.current]) {
+          this.onHit(this.items[this.current]);
+        }
+      },
+      mergeSource(val) {
+        const source = (val || this.source);
+        if (this.selectedChips.length !== source.length) {
+          this.selectedChips = copyObject(source);
+        }
+      },
+      onHit(hit) {
+        this.addSelectChip(hit);
+        this.reset();
+      },
+      queryParamObject() {
+        const param = {};
+        if (this.queryParam) {
+          param[this.queryParam] = this.query;
+        }
+        return param;
+      },
+      reset() {
+        this.items = [];
+        this.query = '';
+        this.loading = false;
+        setTimeout(() => {
+          this.applyInputFocus();
+        }, 3E2);
+      },
+      setActive(index) {
+        this.current = index;
+      },
+      setTheme() {
+        this.closestThemedParent = getClosestThemedParent(this.$parent);
+        if (!this.$material.currentTheme) {
+          this.$material.setCurrentTheme('default');
+        }
+      },
+      startComponent() {
+        this.setTheme();
+        this.mergeSource();
+      },
+      up() {
+        if (this.current - 1 < 0) {
+          this.current = this.selectedChips.length - 1;
+          return;
+        }
+        this.current -= 1;
+      },
+      update() {
+        if (!this.query) {
+          return this.reset();
+        }
+        if (this.minChars && this.query.length < this.minChars) {
+          return null;
+        }
+        this.loading = true;
+        return this.callFetch();
+      },
+    },
+    mounted() {
+      this.startComponent();
+    },
+  };
+</script>
+
+<style lang="css">
+  .chips-autocomplete--expandable {
+    transition: all .5s cubic-bezier(.35,0,.25,1);
+    width: 100%;
+  }
+
+  .md-list-item
+  .chips-autocomplete
+  .md-chip
+  .md-button:not(.md-button-ghost):not(.md-list-item-container) {
+    position: absolute;
+  }
+
+  .md-list.ChipsAutocomplete__List {
+    position: absolute;
+    top: 55px;
+    width: 100%;
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: scroll;
+    box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
+  }
+
+	.md-list.ChipsAutocomplete__List button.md-button {
+		width: calc(100% - 24px);
+	}
+
+  .ChipsAutocomplete__Item.active {
+    background-color: rgba(153, 153, 153, 0.2);
+    text-decoration: none;
+  }
+
+	.ChipsAutocomplete__Item.active .md-button.md-theme-default {
+    background-color: transparent;
+  }
+  .ChipsAutocomplete__IconButton {
+    position: absolute;
+    right: 0;
+    top: 12px;
+  }
+
+  .ChipsAutocomplete__IconButton .md-icon {
+    color: rgba(0,0,0,0.7);
+  }
+
+  .md-table .md-table-cell .chips-autocomplete .md-chip .md-button.md-delete,
+  .md-table .md-table-cell .chips-autocomplete--expandable .md-chip .md-button.md-delete {
+    margin: 2px -10px 0px 0;
+    width: 33px;
+    min-width: 30px;
+    height: 24px;
+    min-height: 24px;
+  }
+
+  .md-table-body .md-table-row:nth-last-child(-n+3) .md-list.ChipsAutocomplete__List {
+    top: -190px;
+  }
+
+  .md-table-cell-container
+  .md-chips.chips-autocomplete.chips-autocomplete--expandable.md-theme-default > div{
+    width: calc(100% + 5px);
+  }
+</style>

From 2c1b8ecbecb053d92249d4acda8b0f1859e88536 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-MacBook-Pro.local>
Date: Sun, 26 Mar 2017 22:19:13 -0300
Subject: [PATCH 02/19] fixes md-autocomplete

---
 docs/src/pages/components/Input.vue           |   5 +
 src/components/mdInputContainer/index.js      |   2 +
 .../mdInputContainer/mdAutocomplete.vue       | 236 ++++++++++++++++++
 3 files changed, 243 insertions(+)
 create mode 100644 src/components/mdInputContainer/mdAutocomplete.vue

diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 8bc3c70..54a346f 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -152,6 +152,11 @@
                 <md-input v-model="initialValue"></md-input>
               </md-input-container>
 
+              <md-input-container>
+                <label>With label</label>
+                <md-autocomplete v-model="initialValue"></md-autocomplete>
+              </md-input-container>
+
               <md-input-container>
                 <label>With label</label>
                 <md-input placeholder="My nice placeholder"></md-input>
diff --git a/src/components/mdInputContainer/index.js b/src/components/mdInputContainer/index.js
index 3194f74..23dbdf6 100644
--- a/src/components/mdInputContainer/index.js
+++ b/src/components/mdInputContainer/index.js
@@ -1,11 +1,13 @@
 import mdInputContainer from './mdInputContainer.vue';
 import mdInput from './mdInput.vue';
+import mdAutocomplete from './mdAutocomplete.vue';
 import mdTextarea from './mdTextarea.vue';
 import mdInputContainerTheme from './mdInputContainer.theme';
 
 export default function install(Vue) {
   Vue.component('md-input-container', mdInputContainer);
   Vue.component('md-input', mdInput);
+  Vue.component('md-autocomplete', mdAutocomplete);
   Vue.component('md-textarea', mdTextarea);
 
   Vue.material.styles.push(mdInputContainerTheme);
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
new file mode 100644
index 0000000..a733262
--- /dev/null
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -0,0 +1,236 @@
+<template lang="html">
+  <div style="width:100%;"
+    @focus="onFocus"
+    @blur="onBlur">
+    <md-menu md-menu-trigger
+      ref="menu">
+      <span md-menu-trigger></span>
+      <input class="md-input"
+        ref="input"
+        type="text"
+        v-model="query"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="debounceUpdate"
+        @keydown.up="onInput"
+        @keydown.down="onInput"/>
+
+      <md-menu-content>
+        <md-menu-item v-if="items.length"
+          v-for="item in items"
+          @click.native="hit(item)">{{ item.name }}</md-menu-item>
+      </md-menu-content>
+    </md-menu>
+  </div>
+</template>
+
+<script>
+  import { util } from 'vue';
+  import common from './common';
+  import getClosestVueParent from '../../core/utils/getClosestVueParent';
+
+  export default {
+    mixins: [common],
+    props: {
+      debounce: {
+        type: Number,
+        default: 1E3
+      },
+      fetch: {
+        type: Function
+      },
+      queryParam: {
+        type: String,
+        default: 'q'
+      },
+      minChars: {
+        type: Number,
+        default: 1
+      }
+    },
+    data() {
+      return {
+        current: -1,
+        items: [],
+        loading: false,
+        query: '',
+        selected: null,
+        src: 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search',
+        timeout: 0
+      };
+    },
+    watch: {
+      query(value) {
+        this.$refs.input.value = value;
+        this.setParentUpdateValue(value);
+      },
+      value(value) {
+        this.query = value;
+        this.setParentUpdateValue(value);
+      }
+    },
+    methods: {
+      activeClass(index) {
+        return {
+          active: this.current === index
+        };
+      },
+      debounceUpdate() {
+        this.onInput();
+
+        if (this.timeout) {
+          window.clearTimeout(this.timeout);
+        }
+
+        this.timeout = window.setTimeout(() => {
+          this.update();
+        }, this.debounce);
+      },
+      down() {
+        if (this.current < this.items.length - 1) {
+          this.current++;
+        } else {
+          this.current = -1;
+        }
+      },
+      fetchUrl() {
+        if (!this.$http) {
+          return util.warn('You need to provide a HTTP client', this);
+        }
+
+        if (!this.src || this.fetch) {
+          return util.warn('You need to set the `src` or a `fetch` property', this);
+        }
+
+        const src = this.queryParam ?
+          this.src :
+          `${this.src}${this.queryParam}=${this.query}`;
+
+        const params = this.queryParam ?
+          Object.assign({ [this.queryParam]: this.query }, this.data) :
+          this.data;
+
+        return this.$http.get(src, { params });
+      },
+      getResource() {
+        return this.fetch ?
+          this.fetch :
+          this.fetchUrl;
+      },
+      hit(item) {
+        // util.warn('You need to implement the `onHit` method', this);
+        this.query = item.name;
+        this.$refs.input.value = item.name;
+        this.selected = item;
+        this.onInput();
+      },
+      onInput() {
+        this.updateValues();
+        this.$emit('input', this.selected, this.$refs.input.value);
+        this.$emit('selected', this.selected, this.$refs.input.value);
+      },
+      reset() {
+        this.items = [];
+        this.query = '';
+        this.loading = false;
+      },
+      setActive(index) {
+        this.current = index;
+      },
+      setParentValue(value) {
+        this.parentContainer.setValue(value || this.$refs.input.value);
+      },
+      setParentDisabled() {
+        this.parentContainer.isDisabled = this.disabled;
+      },
+      setParentRequired() {
+        this.parentContainer.isRequired = this.required;
+      },
+      setParentPlaceholder() {
+        this.parentContainer.hasPlaceholder = !!this.placeholder;
+      },
+      setParentUpdateValue(value) {
+        this.setParentValue(value);
+        this.updateValues(value);
+      },
+      up() {
+        if (this.current > 0) {
+          this.current--;
+        } else if (this.current === -1) {
+          this.current = this.items.length - 1;
+        } else {
+          this.current = -1;
+        }
+      },
+      update() {
+        if (!this.query) {
+          return this.reset();
+        }
+
+        if (this.minChars && this.query.length < this.minChars) {
+          return;
+        }
+
+        this.loading = true;
+
+        this.getResource()()
+          .then((response) => {
+            if (this.query) {
+              let data = response.data;
+
+              data = this.prepareResponseData ?
+                this.prepareResponseData(data) :
+                data;
+              this.items = this.limit ?
+                data.slice(0, this.limit) :
+                data;
+              this.current = -1;
+              this.loading = false;
+
+              this.toggleMenu();
+
+              if (this.selectFirst) {
+                this.down();
+              }
+            }
+          });
+      },
+      toggleMenu() {
+        if (this.items.length) {
+          this.$refs.menu.toggle();
+        }
+      },
+      updateValues(value) {
+        const newValue = value || this.$refs.input.value || this.value;
+
+        this.setParentValue(newValue);
+        this.parentContainer.inputLength = newValue ? newValue.length : 0;
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
+        this.query = this.value;
+
+        if (!this.parentContainer) {
+          this.$destroy();
+
+          throw new Error('You should wrap the md-input in a md-input-container');
+        }
+
+        this.setParentDisabled();
+        this.setParentRequired();
+        this.setParentPlaceholder();
+        this.handleMaxLength();
+        this.updateValues();
+      });
+    }
+  };
+</script>
+
+<style lang="css">
+</style>

From 13616b91336127463621eeefd7b54caf6b9ffe49 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-MacBook-Pro.local>
Date: Sun, 26 Mar 2017 22:41:19 -0300
Subject: [PATCH 03/19] autocomplete

---
 .../mdInputContainer/mdAutocomplete.vue           | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index a733262..abbf9fa 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -22,7 +22,7 @@
       <md-menu-content>
         <md-menu-item v-if="items.length"
           v-for="item in items"
-          @click.native="hit(item)">{{ item.name }}</md-menu-item>
+          @click.native="hit(item)">{{ item[printAttribute] }}</md-menu-item>
       </md-menu-content>
     </md-menu>
   </div>
@@ -47,6 +47,10 @@
         type: String,
         default: 'q'
       },
+      printAttribute: {
+        type: String,
+        default: 'name'
+      },
       minChars: {
         type: Number,
         default: 1
@@ -122,15 +126,16 @@
           this.fetchUrl;
       },
       hit(item) {
-        // util.warn('You need to implement the `onHit` method', this);
-        this.query = item.name;
-        this.$refs.input.value = item.name;
+        debugger;
+        this.query = item[this.printAttribute];
+        this.$refs.input.value = item[this.printAttribute];
         this.selected = item;
         this.onInput();
       },
       onInput() {
         this.updateValues();
-        this.$emit('input', this.selected, this.$refs.input.value);
+        this.$emit('change', this.$refs.input.value);
+        this.$emit('input', this.$refs.input.value);
         this.$emit('selected', this.selected, this.$refs.input.value);
       },
       reset() {

From e9f5e83b3b941a9f5b9279a8a601e3975922d8ca Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 27 Mar 2017 14:32:45 -0300
Subject: [PATCH 04/19] remove chips autocomplete

---
 .../mdChips/mdChipsAutocomplete.vue           | 390 ------------------
 1 file changed, 390 deletions(-)
 delete mode 100644 src/components/mdChips/mdChipsAutocomplete.vue

diff --git a/src/components/mdChips/mdChipsAutocomplete.vue b/src/components/mdChips/mdChipsAutocomplete.vue
deleted file mode 100644
index ebb9a7e..0000000
--- a/src/components/mdChips/mdChipsAutocomplete.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
-  <div class="md-chips chips-autocomplete chips-autocomplete--expandable"
-    :class="[themeClass, classes]"
-    @focus="focusInputContainer">
-    <md-input-container @click.native="applyInputFocus">
-      <md-chip
-        v-for="chip in selectedChips"
-        :md-deletable="isDeletable"
-        :disabled="disabled"
-        @delete="deleteChip(chip)">
-				{{ chip[printAttribute] }}
-      </md-chip>
-      <md-input
-        v-show="!mdStatic"
-        v-model="query"
-        :type="mdInputType"
-        :placeholder="mdInputPlaceholder"
-        :id="inputId"
-        :name="mdInputName"
-        :disabled="disabled"
-        :required="required"
-        @input="update"
-        @keydown.native.delete="deleteLastChip"
-        @keydown.native.prevent.enter="hit"
-        @keydown.native.prevent.186="hit"
-        @keydown.down="down"
-        @keydown.up="up"
-        tabindex="0"
-        ref="input">
-      </md-input>
-      <ul class="md-list md-theme-default ChipsAutocomplete__List"
-        ref="resultList"
-        v-if="items && items.length">
-        <li class="md-list-item md-menu-item md-option ChipsAutocomplete__Item"
-          :class="{
-	          'active': this.current === index,
-	        }"
-          v-for="(item, index) in items"
-          @mousedown="hit"
-          @mousemove="setActive(index)">
-          <md-button @click.native="hit"
-            @keydown.native.delete="deleteLastChip"
-            @keydown.native.prevent.enter="hit"
-            @keydown.native.prevent.186="hit"
-            @mousemover="setActive(index)">
-            {{ item[printAttribute] }}
-          </md-button>
-        </li>
-      </ul>
-    </md-input-container>
-  </div>
-</template>
-<script>
-  import getClosestVueParent from '../../core/utils/getClosestVueParent';
-  import theme from '../../core/components/mdTheme/mixin';
-  import uniqueId from '../../core/utils/uniqueId';
-
-  import {
-    copyObject,
-    getClosestThemedParent,
-  } from '../common/functions/helpers';
-
-  export default {
-    name: 'ChipsAutocomplete',
-    props: {
-      disabled: Boolean,
-      fetchFunction: {
-        type: Function,
-      },
-      mdInputId: String,
-      mdInputName: String,
-      mdInputPlaceholder: {
-        type: String,
-        default: 'Buscar por algo...',
-      },
-      mdInputType: {
-        type: String,
-        default: 'text',
-      },
-      mdMax: {
-        type: Number,
-        default: Infinity,
-      },
-      mdStatic: Boolean,
-      mdTheme: String,
-      printAttribute: {
-        type: String,
-        default() { return 'nome'; },
-      },
-      queryParam: {
-        type: String,
-        default() { return 'q'; },
-      },
-      required: Boolean,
-      saveOne: Boolean,
-      source: {
-        type: Array,
-        default() { return []; },
-      },
-      url: {
-        type: String,
-        default() {
-          return 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search';
-        },
-      },
-      value: {
-        type: Array,
-        default() { return []; },
-      },
-    },
-    data() {
-      return {
-        closestThemedParent: false,
-        current: -1,
-        inputId: this.mdInputId || `chips-${uniqueId()}`,
-        items: [],
-        query: null,
-        selectedChips: this.value,
-      };
-    },
-    watch: {
-      value(value) {
-        this.selectedChips = value;
-      },
-      source(newVal) {
-        this.mergeSource(newVal);
-      },
-    },
-    computed: {
-      classes() {
-        return {
-          'md-disabled': this.disabled,
-          'md-static': this.mdStatic,
-        };
-      },
-      isDeletable() {
-        return !(this.mdStatic || this.selectedChips.length === 1);
-      },
-      themeClass() {
-        if (this.mdTheme) {
-          return `md-theme-${this.mdTheme}`;
-        }
-        let theme = this.closestThemedParent.mdTheme;
-        if (!theme) {
-          theme = (this.closestThemedParent) ?
-            this.closestThemedParent.mdName :
-            theme = this.$material.currentTheme;
-        }
-        return `md-theme-${theme}`;
-      },
-    },
-    methods: {
-      addChip() {
-        if (this.query && this.selectedChips.length < this.mdMax) {
-          const value = this.query.trim();
-          if (this.selectedChips.indexOf(value) < 0) {
-            this.selectedChips.push(value);
-            this.query = null;
-            this.$emit('input', this.selectedChips);
-            this.$emit('change', this.selectedChips);
-            this.applyInputFocus();
-          }
-        }
-      },
-      addSelectChip(value) {
-        if (this.findChipIndex(value) < 0) {
-          this.selectedChips.push(value);
-          this.query = null;
-          this.$emit('input', this.selectedChips);
-          this.$emit('change', this.selectedChips);
-          this.applyInputFocus();
-        }
-      },
-      applyInputFocus() {
-        this.$nextTick(() => {
-          this.$refs.input.$el.focus();
-        });
-      },
-      callFetch() {
-        return (this.fetchFunction) ?
-        this.fetchFunction(this.queryParamObject())
-          .then(response => this.handleRequest(response)) :
-        this.fetch()
-          .then(response => this.handleRequest(response));
-      },
-      deleteChip(chip) {
-        const index = this.selectedChips.indexOf(chip);
-        if (index >= 0) {
-          this.selectedChips.splice(index, 1);
-        }
-        this.$emit('delete', chip);
-        this.$emit('change', this.selectedChips);
-        this.applyInputFocus();
-      },
-      deleteLastChip() {
-        if (!this.query) {
-          this.selectedChips.pop();
-          this.$emit('change', this.selectedChips);
-          this.applyInputFocus();
-        }
-      },
-      down() {
-        if ((this.current + 1) >= this.selectedChips.length) {
-          this.current = 0;
-          return;
-        }
-        this.current += 1;
-      },
-      fetch() {
-        if (!this.url) {
-          console.warn('You need to set the `src` property', this); // eslint-disable-line
-          return this;
-        }
-        const src = this.queryParam
-          ? this.url
-          : this.url + this.query;
-        const params = this.queryParam
-          ? Object.assign({ [this.queryParam]: this.query }, this.data)
-          : this.data;
-        return this.$http.get(src, { params });
-      },
-      findChipIndex(chip) {
-        if (typeof chip === 'string') {
-          return this.selectedChips.indexOf(chip);
-        }
-        const selectedChip = (chip.hasOwnProperty('id')) ?
-          this.selectedChips.find(el => el.id === chip.id) :
-          this.selectedChips.indexOf(chip);
-        if (typeof selectedChip !== 'number') {
-          return (!selectedChip) ?
-          -1 :
-          this.selectedChips.indexOf(selectedChip);
-        }
-        return selectedChip;
-      },
-      focusInputContainer() {
-        this.$refs.input.$el.focus();
-      },
-      handleRequest(response) {
-        if (this.query) {
-          let data = (response.data.hasOwnProperty('length')) ?
-            response.data :
-            response.data.resposta;
-
-          data = this.prepareResponseData ?
-            this.prepareResponseData(data) :
-            data;
-
-          this.items = this.limit ?
-            data.slice(0, this.limit) :
-            data;
-
-          this.current = -1;
-          this.loading = false;
-          if (this.selectFirst) {
-            this.down();
-          }
-        }
-        return response;
-      },
-      hit() {
-        if (this.current !== -1 && this.items && this.items[this.current]) {
-          this.onHit(this.items[this.current]);
-        }
-      },
-      mergeSource(val) {
-        const source = (val || this.source);
-        if (this.selectedChips.length !== source.length) {
-          this.selectedChips = copyObject(source);
-        }
-      },
-      onHit(hit) {
-        this.addSelectChip(hit);
-        this.reset();
-      },
-      queryParamObject() {
-        const param = {};
-        if (this.queryParam) {
-          param[this.queryParam] = this.query;
-        }
-        return param;
-      },
-      reset() {
-        this.items = [];
-        this.query = '';
-        this.loading = false;
-        setTimeout(() => {
-          this.applyInputFocus();
-        }, 3E2);
-      },
-      setActive(index) {
-        this.current = index;
-      },
-      setTheme() {
-        this.closestThemedParent = getClosestThemedParent(this.$parent);
-        if (!this.$material.currentTheme) {
-          this.$material.setCurrentTheme('default');
-        }
-      },
-      startComponent() {
-        this.setTheme();
-        this.mergeSource();
-      },
-      up() {
-        if (this.current - 1 < 0) {
-          this.current = this.selectedChips.length - 1;
-          return;
-        }
-        this.current -= 1;
-      },
-      update() {
-        if (!this.query) {
-          return this.reset();
-        }
-        if (this.minChars && this.query.length < this.minChars) {
-          return null;
-        }
-        this.loading = true;
-        return this.callFetch();
-      },
-    },
-    mounted() {
-      this.startComponent();
-    },
-  };
-</script>
-
-<style lang="css">
-  .chips-autocomplete--expandable {
-    transition: all .5s cubic-bezier(.35,0,.25,1);
-    width: 100%;
-  }
-
-  .md-list-item
-  .chips-autocomplete
-  .md-chip
-  .md-button:not(.md-button-ghost):not(.md-list-item-container) {
-    position: absolute;
-  }
-
-  .md-list.ChipsAutocomplete__List {
-    position: absolute;
-    top: 55px;
-    width: 100%;
-    z-index: 10;
-    max-height: 200px;
-    overflow-y: scroll;
-    box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
-  }
-
-	.md-list.ChipsAutocomplete__List button.md-button {
-		width: calc(100% - 24px);
-	}
-
-  .ChipsAutocomplete__Item.active {
-    background-color: rgba(153, 153, 153, 0.2);
-    text-decoration: none;
-  }
-
-	.ChipsAutocomplete__Item.active .md-button.md-theme-default {
-    background-color: transparent;
-  }
-  .ChipsAutocomplete__IconButton {
-    position: absolute;
-    right: 0;
-    top: 12px;
-  }
-
-  .ChipsAutocomplete__IconButton .md-icon {
-    color: rgba(0,0,0,0.7);
-  }
-
-  .md-table .md-table-cell .chips-autocomplete .md-chip .md-button.md-delete,
-  .md-table .md-table-cell .chips-autocomplete--expandable .md-chip .md-button.md-delete {
-    margin: 2px -10px 0px 0;
-    width: 33px;
-    min-width: 30px;
-    height: 24px;
-    min-height: 24px;
-  }
-
-  .md-table-body .md-table-row:nth-last-child(-n+3) .md-list.ChipsAutocomplete__List {
-    top: -190px;
-  }
-
-  .md-table-cell-container
-  .md-chips.chips-autocomplete.chips-autocomplete--expandable.md-theme-default > div{
-    width: calc(100% + 5px);
-  }
-</style>

From 6393481d54d89bde79b96d22625334fbf64ce9a7 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 27 Mar 2017 14:36:58 -0300
Subject: [PATCH 05/19] removed debugger

---
 src/components/mdInputContainer/mdAutocomplete.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index abbf9fa..4a70db9 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -126,7 +126,6 @@
           this.fetchUrl;
       },
       hit(item) {
-        debugger;
         this.query = item[this.printAttribute];
         this.$refs.input.value = item[this.printAttribute];
         this.selected = item;

From a0795af2eac165ddcdb160042977a638e962dc8b Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 27 Mar 2017 16:16:09 -0300
Subject: [PATCH 06/19] autocomplete

---
 docs/src/pages/components/Input.vue           |  5 ++-
 .../mdInputContainer/mdAutocomplete.vue       | 43 +++++--------------
 .../mdInputContainer/mdInputContainer.scss    |  8 ++++
 3 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 54a346f..adafd39 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -153,8 +153,8 @@
               </md-input-container>
 
               <md-input-container>
-                <label>With label</label>
-                <md-autocomplete v-model="initialValue"></md-autocomplete>
+                <label>Autocomplete</label>
+                <md-autocomplete v-model="autocompleteValue"></md-autocomplete>
               </md-input-container>
 
               <md-input-container>
@@ -455,6 +455,7 @@
   export default {
     data() {
       return {
+        autocompleteValue: '',
         initialValue: 'My initial value'
       };
     }
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index 4a70db9..cf94454 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div style="width:100%;"
+  <div class="md-autocomplete"
     @focus="onFocus"
     @blur="onBlur">
     <md-menu md-menu-trigger
@@ -15,21 +15,21 @@
         :maxlength="maxlength"
         @focus="onFocus"
         @blur="onBlur"
-        @input="debounceUpdate"
-        @keydown.up="onInput"
-        @keydown.down="onInput"/>
+        @input="debounceUpdate"/>
 
       <md-menu-content>
-        <md-menu-item v-if="items.length"
-          v-for="item in items"
-          @click.native="hit(item)">{{ item[printAttribute] }}</md-menu-item>
+        <md-menu-item v-for="item in items"
+          v-if="items.length"
+          @keyup.enter="hit(item)"
+          @click.native="hit(item)">
+          {{ item[printAttribute] }}
+        </md-menu-item>
       </md-menu-content>
     </md-menu>
   </div>
 </template>
 
 <script>
-  import { util } from 'vue';
   import common from './common';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
@@ -94,20 +94,13 @@
           this.update();
         }, this.debounce);
       },
-      down() {
-        if (this.current < this.items.length - 1) {
-          this.current++;
-        } else {
-          this.current = -1;
-        }
-      },
       fetchUrl() {
         if (!this.$http) {
-          return util.warn('You need to provide a HTTP client', this);
+          throw new Error('You need to provide a HTTP client');
         }
 
         if (!this.src || this.fetch) {
-          return util.warn('You need to set the `src` or a `fetch` property', this);
+          throw new Error('You need to set the `src` or a `fetch` property');
         }
 
         const src = this.queryParam ?
@@ -161,15 +154,6 @@
         this.setParentValue(value);
         this.updateValues(value);
       },
-      up() {
-        if (this.current > 0) {
-          this.current--;
-        } else if (this.current === -1) {
-          this.current = this.items.length - 1;
-        } else {
-          this.current = -1;
-        }
-      },
       update() {
         if (!this.query) {
           return this.reset();
@@ -196,10 +180,6 @@
               this.loading = false;
 
               this.toggleMenu();
-
-              if (this.selectFirst) {
-                this.down();
-              }
             }
           });
       },
@@ -235,6 +215,3 @@
     }
   };
 </script>
-
-<style lang="css">
-</style>
diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss
index 50eceef..027051a 100644
--- a/src/components/mdInputContainer/mdInputContainer.scss
+++ b/src/components/mdInputContainer/mdInputContainer.scss
@@ -127,6 +127,14 @@ $input-size: 32px;
   }
 }
 
+.md-input-container {
+  .md-autocomplete,
+  .md-autocomplete .md-menu,
+  .md-autocomplete .md-menu .md-input {
+    width: 100%;
+  }
+}
+
 .md-input-container {
   &.md-input-placeholder {
     label {

From bdf9e5b66f64aa41b643b674f627b510b79f9370 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 27 Mar 2017 16:20:34 -0300
Subject: [PATCH 07/19] removing dep on http

---
 .../mdInputContainer/mdAutocomplete.vue       | 30 ++-----------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index cf94454..1ae3105 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -41,7 +41,8 @@
         default: 1E3
       },
       fetch: {
-        type: Function
+        type: Function,
+        required: true
       },
       queryParam: {
         type: String,
@@ -63,7 +64,6 @@
         loading: false,
         query: '',
         selected: null,
-        src: 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search',
         timeout: 0
       };
     },
@@ -94,30 +94,6 @@
           this.update();
         }, this.debounce);
       },
-      fetchUrl() {
-        if (!this.$http) {
-          throw new Error('You need to provide a HTTP client');
-        }
-
-        if (!this.src || this.fetch) {
-          throw new Error('You need to set the `src` or a `fetch` property');
-        }
-
-        const src = this.queryParam ?
-          this.src :
-          `${this.src}${this.queryParam}=${this.query}`;
-
-        const params = this.queryParam ?
-          Object.assign({ [this.queryParam]: this.query }, this.data) :
-          this.data;
-
-        return this.$http.get(src, { params });
-      },
-      getResource() {
-        return this.fetch ?
-          this.fetch :
-          this.fetchUrl;
-      },
       hit(item) {
         this.query = item[this.printAttribute];
         this.$refs.input.value = item[this.printAttribute];
@@ -165,7 +141,7 @@
 
         this.loading = true;
 
-        this.getResource()()
+        this.fetch()
           .then((response) => {
             if (this.query) {
               let data = response.data;

From e51dfaf548894c8a0bd07d91d857b62882719844 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 27 Mar 2017 20:16:39 -0300
Subject: [PATCH 08/19] correcoes

---
 docs/src/pages/components/Input.vue           | 36 ++++++-
 .../mdInputContainer/mdAutocomplete.vue       | 93 +++++++++++++------
 2 files changed, 99 insertions(+), 30 deletions(-)

diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index adafd39..8c39e53 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -153,8 +153,13 @@
               </md-input-container>
 
               <md-input-container>
-                <label>Autocomplete</label>
-                <md-autocomplete v-model="autocompleteValue"></md-autocomplete>
+                <label>Autocomplete (with fetch)</label>
+                <md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
+              </md-input-container>
+
+              <md-input-container>
+                <label>Autocomplete (with list)</label>
+                <md-autocomplete v-model="autocompleteValue" :list="listAutocomplete" :filter-list="filterList"></md-autocomplete>
               </md-input-container>
 
               <md-input-container>
@@ -456,8 +461,33 @@
     data() {
       return {
         autocompleteValue: '',
-        initialValue: 'My initial value'
+        initialValue: 'My initial value',
+        listAutocomplete: [
+          {name: 'oi'},
+          {name: 'hello'},
+          {name: 'salut'}
+        ]
       };
+    },
+    methods: {
+      fetchAutocomplete(param) {
+        const myInit = {
+          method: 'GET',
+          headers: new Headers(),
+          mode: 'cors',
+          cache: 'default'
+        };
+        const url = 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search';
+        const queryParam = Object.keys(param)[0];
+        const queryValue = param[queryParam];
+        const queryUrl = `${url}?${queryParam}=${queryValue}`;
+
+        return window.fetch(queryUrl, myInit)
+          .then((res) => res.json());
+      },
+      filterList(list, query) {
+        return list.filter((el) => el.name.indexOf(query) !== -1);
+      }
     }
   };
 </script>
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index 1ae3105..1761721 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -41,25 +41,31 @@
         default: 1E3
       },
       fetch: {
-        type: Function,
-        required: true
+        type: Function
       },
-      queryParam: {
-        type: String,
-        default: 'q'
-      },
-      printAttribute: {
-        type: String,
-        default: 'name'
+      filterList: Function,
+      list: {
+        type: Array,
+        default() {
+          return [];
+        }
       },
       minChars: {
         type: Number,
         default: 1
+      },
+      prepareResponseData: Function,
+      printAttribute: {
+        type: String,
+        default: 'name'
+      },
+      queryParam: {
+        type: String,
+        default: 'q'
       }
     },
     data() {
       return {
-        current: -1,
         items: [],
         loading: false,
         query: '',
@@ -67,7 +73,15 @@
         timeout: 0
       };
     },
+    computed: {
+      listIsEmpty() {
+        return this.list.length === 0;
+      }
+    },
     watch: {
+      list(value) {
+        this.items = Object.assign([], value);
+      },
       query(value) {
         this.$refs.input.value = value;
         this.setParentUpdateValue(value);
@@ -78,11 +92,6 @@
       }
     },
     methods: {
-      activeClass(index) {
-        return {
-          active: this.current === index
-        };
-      },
       debounceUpdate() {
         this.onInput();
 
@@ -91,6 +100,10 @@
         }
 
         this.timeout = window.setTimeout(() => {
+          if (!this.listIsEmpty) {
+            this.renderFilteredList();
+            return;
+          }
           this.update();
         }, this.debounce);
       },
@@ -106,14 +119,17 @@
         this.$emit('input', this.$refs.input.value);
         this.$emit('selected', this.selected, this.$refs.input.value);
       },
+      renderFilteredList() {
+        if (this.filterList) {
+          this.items = this.filterList(Object.assign([], this.list), this.query);
+        }
+        this.toggleMenu();
+      },
       reset() {
         this.items = [];
         this.query = '';
         this.loading = false;
       },
-      setActive(index) {
-        this.current = index;
-      },
       setParentValue(value) {
         this.parentContainer.setValue(value || this.$refs.input.value);
       },
@@ -131,7 +147,7 @@
         this.updateValues(value);
       },
       update() {
-        if (!this.query) {
+        if (!this.query && !this.list.length) {
           return this.reset();
         }
 
@@ -141,10 +157,12 @@
 
         this.loading = true;
 
-        this.fetch()
+        const queryObject = { [this.queryParam]: this.query };
+
+        this.fetch(queryObject)
           .then((response) => {
             if (this.query) {
-              let data = response.data;
+              let data = response || response.data || response.body;
 
               data = this.prepareResponseData ?
                 this.prepareResponseData(data) :
@@ -152,13 +170,33 @@
               this.items = this.limit ?
                 data.slice(0, this.limit) :
                 data;
-              this.current = -1;
+
               this.loading = false;
 
               this.toggleMenu();
             }
           });
       },
+      verifyProps() {
+        let errorMessage = '';
+
+        if (!this.parentContainer) {
+          errorMessage = 'You should wrap the md-input in a md-input-container';
+        }
+
+        if (!this.listIsEmpty && !this.filterList) {
+          errorMessage = 'You should use a `filterList` function prop with the `list` prop';
+        }
+
+        if (!fetch) {
+          errorMessage = 'You should use a `fetch` function prop';
+        }
+
+        if (errorMessage) {
+          this.$destroy();
+          throw new Error(errorMessage);
+        }
+      },
       toggleMenu() {
         if (this.items.length) {
           this.$refs.menu.toggle();
@@ -174,13 +212,14 @@
     mounted() {
       this.$nextTick(() => {
         this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
+
+        if (!this.listIsEmpty) {
+          this.items = Object.assign([], this.list);
+        }
+
         this.query = this.value;
 
-        if (!this.parentContainer) {
-          this.$destroy();
-
-          throw new Error('You should wrap the md-input in a md-input-container');
-        }
+        this.verifyProps();
 
         this.setParentDisabled();
         this.setParentRequired();

From 00123e5d4209569f9b126b062e355cc8de559841 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-MacBook-Pro.local>
Date: Mon, 27 Mar 2017 23:49:43 -0300
Subject: [PATCH 09/19] documentation

---
 docs/src/pages/components/Input.vue | 146 ++++++++++++++++++++++++++--
 1 file changed, 139 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 8c39e53..c6eeba0 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -98,6 +98,126 @@
           </md-table>
         </api-table>
 
+        <api-table name="md-autocomplete">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>v-model</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>A required model object to bind the value.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>debounce</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Sets the debounce time. Default <code>1000</code> milliseconds</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>fetch</md-table-cell>
+                <md-table-cell><code>Function</code></md-table-cell>
+                <md-table-cell>Sets the fetch function mdAutocomplete will call after the debounce is reached. Chosing <code>fetch</code> prop <strong>disables</strong> the use of either <code>list</code> and <code>filterList</code> props.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>list</md-table-cell>
+                <md-table-cell><code>Array</code></md-table-cell>
+                <md-table-cell>Sets an array of possible values. Default <code>[]</code>. MdAutocomplete will only search in this list if it's set. Chosing <code>list</code> prop <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>filter-list</md-table-cell>
+                <md-table-cell><code>Function</code></md-table-cell>
+                <md-table-cell>Sets a filter function which will be used to filter the <code>list</code> props. Chosing <code>filterList</code> prop <strong>requires</strong> the use of <code>list</code> props and <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>min-chars</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Sets the minimum number of characters before making opening the autocomplete options or making a request. Default <code>3</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>prepare-response-data</md-table-cell>
+                <md-table-cell><code>Function</code></md-table-cell>
+                <md-table-cell>This function will be called once the <code>fetch</code> prop has a response. It can manipulate the data received from the server. The output should always be an <code>Array</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>print-attribute</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>This prop will be used to print values on the autocomplete list. It shall match an object key expected on the <code>fetch</code> result list. Default <code>name</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>query-param</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Sets the query parameter. Example: http//api.com/<strong>q</strong>?=SOMETHING. Default <code>q</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>disabled</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>required</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Apply the required rule to style the label with an "*". Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>placeholder</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Sets the placeholder.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>maxlength</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>change</md-table-cell>
+                <md-table-cell>The <code>String</code> selected</md-table-cell>
+                <md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
+              </md-table-row>
+              <md-table-row>
+                <md-table-cell>input</md-table-cell>
+                <md-table-cell>The <code>String</code> selected</md-table-cell>
+                <md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
+              </md-table-row>
+              <md-table-row>
+                <md-table-cell>selected</md-table-cell>
+                <md-table-cell>Emits the <code>Object</code> as well as the <code>String</code> selected.</md-table-cell>
+                <md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+
         <api-table name="md-textarea">
           <md-table slot="properties">
             <md-table-header>
@@ -154,12 +274,7 @@
 
               <md-input-container>
                 <label>Autocomplete (with fetch)</label>
-                <md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
-              </md-input-container>
-
-              <md-input-container>
-                <label>Autocomplete (with list)</label>
-                <md-autocomplete v-model="autocompleteValue" :list="listAutocomplete" :filter-list="filterList"></md-autocomplete>
+                <md-autocomplete v-model="autocompleteValue" :fetch="fetchFunction"></md-autocomplete>
               </md-input-container>
 
               <md-input-container>
@@ -197,6 +312,11 @@
                   &lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
                 &lt;/md-input-container&gt;
 
+                &lt;md-input-container&gt;
+                  &lt;label&gt;Autocomplete (with fetch)&lt;/label&gt;
+                  &lt;md-input v-model=&quot;autocompleteValue&quot; :fetch=&quot;fetchFunction&quot;&gt;&lt;/md-input&gt;
+                &lt;/md-input-container&gt;
+
                 &lt;md-input-container&gt;
                   &lt;label&gt;With label&lt;/label&gt;
                   &lt;md-input placeholder=&quot;My nice placeholder&quot;&gt;&lt;/md-input&gt;
@@ -230,7 +350,19 @@
                   return {
                     initialValue: &apos;My initial value&apos;
                   };
-                }
+                },
+                methods: {
+                  fetchFunction(param) {
+                    // param = { queryParam: query }
+
+                    // &apos;fetchAutocomplete&apos; should return a Promise.
+
+                    // md-autocomplete will call fetchAutocomplete and pass
+                    // &apos;param&apos; as an argument.
+                    // the &apos;param&apos; is composed by a query param and
+                    // a query.
+                  },
+                },
               };
             </code-block>
           </div>

From b15f0a03a31fe7cbadaef2f78cdaada367bf3bc4 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 3 Apr 2017 11:29:23 -0300
Subject: [PATCH 10/19] fix on line 191 mdAutocomplete

---
 src/components/mdInputContainer/mdAutocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index 1761721..b48fa9a 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -188,7 +188,7 @@
           errorMessage = 'You should use a `filterList` function prop with the `list` prop';
         }
 
-        if (!fetch) {
+        if (!this.fetch) {
           errorMessage = 'You should use a `fetch` function prop';
         }
 

From 9df33453e2b753268a181b8766a7184a75b670be Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 3 Apr 2017 13:11:09 -0300
Subject: [PATCH 11/19] fix on selected event

---
 src/components/mdInputContainer/mdAutocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index b48fa9a..50fb233 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -112,12 +112,12 @@
         this.$refs.input.value = item[this.printAttribute];
         this.selected = item;
         this.onInput();
+        this.$emit('selected', this.selected, this.$refs.input.value);
       },
       onInput() {
         this.updateValues();
         this.$emit('change', this.$refs.input.value);
         this.$emit('input', this.$refs.input.value);
-        this.$emit('selected', this.selected, this.$refs.input.value);
       },
       renderFilteredList() {
         if (this.filterList) {

From 287c0c9db53187f5d9c2f111334aaf59f94a2631 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 3 Apr 2017 15:18:56 -0300
Subject: [PATCH 12/19] added name prop

---
 docs/src/pages/components/Input.vue                | 2 +-
 src/components/mdInputContainer/mdAutocomplete.vue | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index c6eeba0..16b4566 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -274,7 +274,7 @@
 
               <md-input-container>
                 <label>Autocomplete (with fetch)</label>
-                <md-autocomplete v-model="autocompleteValue" :fetch="fetchFunction"></md-autocomplete>
+                <md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
               </md-input-container>
 
               <md-input-container>
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index 50fb233..b400781 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -13,6 +13,7 @@
         :required="required"
         :placeholder="placeholder"
         :maxlength="maxlength"
+        :name="name"
         @focus="onFocus"
         @blur="onBlur"
         @input="debounceUpdate"/>
@@ -54,6 +55,7 @@
         type: Number,
         default: 1
       },
+      name: String,
       prepareResponseData: Function,
       printAttribute: {
         type: String,

From c82fd9c41abb658889281b2c616ffcc4d737f4f4 Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Mon, 3 Apr 2017 23:00:42 -0300
Subject: [PATCH 13/19] modularizing code

---
 .../mdInputContainer/mdAutocomplete.vue       | 53 +----------------
 src/core/utils/autocomplete-commons.js        | 59 +++++++++++++++++++
 2 files changed, 61 insertions(+), 51 deletions(-)
 create mode 100644 src/core/utils/autocomplete-commons.js

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index b400781..fbca3d8 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -31,41 +31,12 @@
 </template>
 
 <script>
+  import autocompleteCommon from '../../core/utils/autocomplete-commons';
   import common from './common';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
-    mixins: [common],
-    props: {
-      debounce: {
-        type: Number,
-        default: 1E3
-      },
-      fetch: {
-        type: Function
-      },
-      filterList: Function,
-      list: {
-        type: Array,
-        default() {
-          return [];
-        }
-      },
-      minChars: {
-        type: Number,
-        default: 1
-      },
-      name: String,
-      prepareResponseData: Function,
-      printAttribute: {
-        type: String,
-        default: 'name'
-      },
-      queryParam: {
-        type: String,
-        default: 'q'
-      }
-    },
+    mixins: [common, autocompleteCommon],
     data() {
       return {
         items: [],
@@ -179,26 +150,6 @@
             }
           });
       },
-      verifyProps() {
-        let errorMessage = '';
-
-        if (!this.parentContainer) {
-          errorMessage = 'You should wrap the md-input in a md-input-container';
-        }
-
-        if (!this.listIsEmpty && !this.filterList) {
-          errorMessage = 'You should use a `filterList` function prop with the `list` prop';
-        }
-
-        if (!this.fetch) {
-          errorMessage = 'You should use a `fetch` function prop';
-        }
-
-        if (errorMessage) {
-          this.$destroy();
-          throw new Error(errorMessage);
-        }
-      },
       toggleMenu() {
         if (this.items.length) {
           this.$refs.menu.toggle();
diff --git a/src/core/utils/autocomplete-commons.js b/src/core/utils/autocomplete-commons.js
new file mode 100644
index 0000000..c6ba8a9
--- /dev/null
+++ b/src/core/utils/autocomplete-commons.js
@@ -0,0 +1,59 @@
+export default {
+  props: {
+    debounce: {
+      type: Number,
+      default: 1E3
+    },
+    disabled: Boolean,
+    fetch: {
+      type: Function
+    },
+    filterList: Function,
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    minChars: {
+      type: Number,
+      default: 1
+    },
+    name: String,
+    prepareResponseData: Function,
+    printAttribute: {
+      type: String,
+      default: 'name'
+    },
+    queryParam: {
+      type: String,
+      default: 'q'
+    },
+    required: Boolean,
+    value: Array
+  },
+  methods: {
+    onFocus() {
+      if (this.parentContainer) {
+        this.parentContainer.isFocused = true;
+      }
+    },
+    onBlur() {
+      this.parentContainer.isFocused = false;
+      this.setParentValue();
+    },
+    verifyProps() {
+      if (!this.parentContainer) {
+        return this.throwErrorDestroy('You should wrap the md-input in a md-input-container');
+      } else if (!this.listIsEmpty && this.filterList) {
+        return this.throwErrorDestroy('You should use a `filterList` function prop with the `list` prop');
+      } else if (!this.fetch) {
+        return this.throwErrorDestroy('You should use a `fetch` function prop');
+      }
+    },
+    throwErrorDestroy(errorMessage) {
+      this.$destroy();
+      throw new Error(errorMessage);
+    }
+  }
+};

From a7f4c9d5e970320a315f5687c04ee302c97eebb2 Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Mon, 3 Apr 2017 23:03:15 -0300
Subject: [PATCH 14/19] fix on autocomplete

---
 src/core/utils/autocomplete-commons.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/utils/autocomplete-commons.js b/src/core/utils/autocomplete-commons.js
index c6ba8a9..6994b08 100644
--- a/src/core/utils/autocomplete-commons.js
+++ b/src/core/utils/autocomplete-commons.js
@@ -29,8 +29,7 @@ export default {
       type: String,
       default: 'q'
     },
-    required: Boolean,
-    value: Array
+    required: Boolean
   },
   methods: {
     onFocus() {

From b293f61080802fd3255f4496dea319a45e4f80db Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Mon, 3 Apr 2017 23:10:19 -0300
Subject: [PATCH 15/19] renamed file

---
 src/components/mdInputContainer/mdAutocomplete.vue            | 2 +-
 .../utils/{autocomplete-commons.js => autocomplete-common.js} | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/core/utils/{autocomplete-commons.js => autocomplete-common.js} (91%)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index fbca3d8..c692da5 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-  import autocompleteCommon from '../../core/utils/autocomplete-commons';
+  import autocompleteCommon from '../../core/utils/autocomplete-common';
   import common from './common';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
diff --git a/src/core/utils/autocomplete-commons.js b/src/core/utils/autocomplete-common.js
similarity index 91%
rename from src/core/utils/autocomplete-commons.js
rename to src/core/utils/autocomplete-common.js
index 6994b08..e856558 100644
--- a/src/core/utils/autocomplete-commons.js
+++ b/src/core/utils/autocomplete-common.js
@@ -44,9 +44,9 @@ export default {
     verifyProps() {
       if (!this.parentContainer) {
         return this.throwErrorDestroy('You should wrap the md-input in a md-input-container');
-      } else if (!this.listIsEmpty && this.filterList) {
+      } else if (this.listIsEmpty && this.filterList) {
         return this.throwErrorDestroy('You should use a `filterList` function prop with the `list` prop');
-      } else if (!this.fetch) {
+      } else if (!this.fetch && this.listIsEmpty) {
         return this.throwErrorDestroy('You should use a `fetch` function prop');
       }
     },

From 3b32926c24740d2a7bcb167cd164c47e97b2a4bd Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Wed, 5 Apr 2017 11:18:13 -0300
Subject: [PATCH 16/19] fixing offset menu autocomplete

---
 src/components/mdInputContainer/mdAutocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index c692da5..1ef60e0 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -2,7 +2,7 @@
   <div class="md-autocomplete"
     @focus="onFocus"
     @blur="onBlur">
-    <md-menu md-menu-trigger
+    <md-menu :md-offset-x="8" md-offset-y="45"
       ref="menu">
       <span md-menu-trigger></span>
       <input class="md-input"

From 18378633988f55928d16fac8da6be5aa3d405959 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@sbdes-nb001.softbox.network>
Date: Thu, 13 Apr 2017 16:55:35 -0300
Subject: [PATCH 17/19] focus enhancement

---
 src/components/mdInputContainer/mdAutocomplete.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index 1ef60e0..a054ec3 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -2,7 +2,8 @@
   <div class="md-autocomplete"
     @focus="onFocus"
     @blur="onBlur">
-    <md-menu :md-offset-x="8" md-offset-y="45"
+    <md-menu :md-offset-x="8"
+      md-offset-y="45"
       ref="menu">
       <span md-menu-trigger></span>
       <input class="md-input"
@@ -87,6 +88,12 @@
         this.onInput();
         this.$emit('selected', this.selected, this.$refs.input.value);
       },
+      onFocus() {
+        if (this.parentContainer) {
+          this.parentContainer.isFocused = true;
+        }
+        this.$refs.input.focus();
+      },
       onInput() {
         this.updateValues();
         this.$emit('change', this.$refs.input.value);

From 4633432091bb898c0480c35324c7009d956ecec6 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@sbdes-nb001.softbox.network>
Date: Mon, 17 Apr 2017 11:57:22 -0300
Subject: [PATCH 18/19] adding parentContainer in data

---
 src/components/mdInputContainer/mdAutocomplete.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index a054ec3..44ffbc1 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -44,7 +44,8 @@
         loading: false,
         query: '',
         selected: null,
-        timeout: 0
+        timeout: 0,
+        parentContainer: null,
       };
     },
     computed: {

From ac0a08d8827a5a623fc494a4dc627fe794149a3b Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@sbdes-nb001.softbox.network>
Date: Tue, 25 Apr 2017 08:33:42 -0300
Subject: [PATCH 19/19] enhancements on autocomplete

---
 .../mdInputContainer/mdAutocomplete.vue       | 52 ++++++++++++-------
 .../mdInputContainer/mdInputContainer.scss    |  4 ++
 2 files changed, 38 insertions(+), 18 deletions(-)

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">
     <md-menu :md-offset-x="8"
       md-offset-y="45"
-      ref="menu">
+      ref="menu"
+      class="md-autocomplete-menu">
       <span md-menu-trigger></span>
       <input class="md-input"
         ref="input"
@@ -46,6 +47,7 @@
         selected: null,
         timeout: 0,
         parentContainer: null,
+        searchButton: null,
       };
     },
     computed: {
@@ -89,6 +91,23 @@
         this.onInput();
         this.$emit('selected', this.selected, this.$refs.input.value);
       },
+      makeFetchRequest(queryObject) {
+        return this.fetch(queryObject)
+          .then((response) => {
+            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 {