Merge pull request yuche#401 from notechsolution/master

wffranco · web-flow · commit 79c55d84e60e · 2016-11-12T11:43:52.000-04:00
Add debounce to avoid fast HTTP query (may provide function for yuche#252)
diff --git a/src/Typeahead.vue b/src/Typeahead.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="position: relative"
-    v-bind:class="{'open':showDropdown}"
+       v-bind:class="{'open':showDropdown}"
   >
     <input type="text" class="form-control"
       :placeholder="placeholder"
@@ -25,15 +25,22 @@
 
 <script>
 import {getJSON, coerce} from './utils/utils.js'
+import _ from 'lodash'
 
 let Vue = window.Vue
 
 export default {
   created () {
     this.items = this.primitiveData
+    this.debounceUpdate =  _.debounce(function(that){
+       getJSON(that.async + that.value).then(data => {
+          that.items = (that.key ? data[that.key] : data).slice(0, that.limit)
+          that.showDropdown = that.items.length > 0
+        })
+    }, this.debounce);
   },
   partials: {
-    default: '<span v-html="item | highlight query"></span>'
+    default: '<span v-html="item | highlight value"></span>'
   },
   props: {
     value: {
@@ -81,6 +88,11 @@ export default {
     },
     placeholder: {
       type: String
+    },
+    debounce:{
+      type:Number,
+      default:100,
+      coerce: coerce.number
     }
   },
   data () {
@@ -119,10 +131,7 @@ export default {
         this.showDropdown = this.items.length > 0
       }
       if (this.async) {
-        getJSON(this.async + this.value).then(data => {
-          this.items = (this.key ? data[this.key] : data).slice(0, this.limit)
-          this.showDropdown = this.items.length > 0
-        })
+        this.debounceUpdate(this)
       }
     },
     reset () {
