Resolves #23 - setting the text with v-model searches with the new value

README.md

@@ -64,6 +64,8 @@ var Autocomplete = require('vue2-autocomplete-js');
 
 </template>
 
+You can optionally use v-model to access and update the text entry field. If You
+update the model the component will automatically search for the string entered. 
 
 <script>
 

src/js/components/vue-autocomplete.vue

@@ -28,6 +28,7 @@
         >
           <a
             href="#"
+            @mousedown.prevent="mousedownList()"
             @click.prevent="selectList(data)"
             @mousemove="mousemove(i)"
           >
@@ -55,9 +56,25 @@
   *
   */
 
+  const processInput = function (value) {
+    this.showList = true;
+    // Callback Event
+    if(this.onInput) this.onInput(value)
+    // If Debounce
+    if (this.debounce) {
+      if (this.debounceTask !== undefined) clearTimeout(this.debounceTask)
+      this.debounceTask = setTimeout(() => {
+        return this.getData(value)
+      }, this.debounce)
+    } else {
+      return this.getData(value)
+    }
+  }
+
   export default {
 
     props: {
+      value: String,
       id: String,
       name: String,
       className: String,
@@ -159,6 +176,9 @@
     },
 
     watch: {
+      value(value) {
+        return processInput.bind(this)(value)
+      },
       options(newVal, oldVal) {
         if (this.filterByAnchor) {
           const { type, anchor } = this
@@ -201,17 +221,10 @@
       =============================*/
       handleInput(e){
         const { value } = e.target
-        this.showList = true;
-        // Callback Event
-        if(this.onInput) this.onInput(value)
-        // If Debounce
-        if (this.debounce) {
-          if (this.debounceTask !== undefined) clearTimeout(this.debounceTask)
-          this.debounceTask = setTimeout(() => {
-            return this.getData(value)
-          }, this.debounce)
+        if (this.value !== undefined) {
+          this.$emit('input', value)
         } else {
-          return this.getData(value)
+          return processInput.bind(this)(value)
         }
       },
 
@@ -242,7 +255,6 @@
           case ENTER:
             e.preventDefault()
             this.selectList(this.json[this.focusList])
-            this.showList = false;
           break;
           case ESC:
             this.showList = false;
@@ -279,6 +291,12 @@
         this.showList = true;
       },
 
+
+      // Simply here to prevent default on mouse down so that input field does
+      // not blur
+      mousedownList(e){
+      },
+
       handleBlur(e){
         // Callback Event
         this.onBlur ? this.onBlur(e) : null