Issue#544 (vuematerial#674)

* chips autocomplete

* criando autocomplete

* base solida

* fixing issue vuematerial#544

* removing old files

* reduced debounce time

Author: Pablo Henrique

docs/src/pages/components/Input.vue

@@ -71,6 +71,12 @@
                 <md-table-cell>Sets the type. Default <code>text</code></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>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</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>
@@ -115,6 +121,12 @@
                 <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>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</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>

src/components/mdInputContainer/common.js

@@ -1,11 +1,21 @@
 export default {
   props: {
     value: [String, Number],
+    debounce: {
+      type: Number,
+      default: 3E2
+    },
     disabled: Boolean,
     required: Boolean,
     maxlength: [Number, String],
+    name: String,
     placeholder: String
   },
+  data() {
+    return {
+      timeout: 0
+    };
+  },
   watch: {
     value(value) {
       this.setParentValue(value);
@@ -29,6 +39,15 @@ export default {
       this.parentContainer.enableCounter = this.maxlength > 0;
       this.parentContainer.counterLength = this.maxlength;
     },
+    lazyEventEmitter() {
+      if (this.timeout) {
+        window.clearTimeout(this.timeout);
+      }
+      this.timeout = window.setTimeout(() => {
+        this.$emit('change', this.$el.value);
+        this.$emit('input', this.$el.value);
+      }, this.debounce);
+    },
     setParentValue(value) {
       this.parentContainer.setValue(value || this.$el.value);
     },
@@ -58,8 +77,7 @@ export default {
     },
     onInput() {
       this.updateValues();
-      this.$emit('change', this.$el.value);
-      this.$emit('input', this.$el.value);
+      this.lazyEventEmitter();
     }
   }
 };