Add exposed component functions

Author: olefirenko

README.md

@@ -126,6 +126,27 @@ Gets triggered when the autocomplete input got changed
 #### keypress
 Gets triggered when a key gets pressed
 
+### Exposed component functions
+
+These functions are accessible by setting "ref" on the component ([Refs documentation](https://vuejs.org/v2/guide/components.html#Child-Component-Refs)). See example below how to use these functions.
+
+#### clear()
+
+Call to clear the value of the user input.
+
+#### focus()
+
+Call focus to focus on the element
+
+#### blur()
+
+Call blur to blur (unfocus) the element
+
+#### update(value)
+
+Call to update the user input with a new value
+
+
 ### Example
 
 Please note that you need to provide what method will listen (`v-on:placechanged`) to an event when the address data is obtained.
@@ -136,6 +157,7 @@ Please note that you need to provide what method will listen (`v-on:placechanged
         <h2>Your Address</h2>
 
         <vue-google-autocomplete
+            ref="address"
             id="map"
             classname="form-control"
             placeholder="Please type your address"
@@ -158,6 +180,12 @@ Please note that you need to provide what method will listen (`v-on:placechanged
             }
         },
 
+        mounted() {
+            // To demonstrate functionality of exposed component functions
+            // Here we make focus on the user input
+            this.$refs.address.focus();
+        },
+
         methods: {
             /**
             * When the location found

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-google-autocomplete",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "Vue component to Google Places Autocomplete",
   "main": "src/VueGoogleAutocomplete.vue",
   "homepage": "https://github.com/olefirenko/vue-google-autocomplete",

src/VueGoogleAutocomplete.vue

@@ -1,5 +1,6 @@
 <template>
     <input
+        ref="autocomplete"
         type="text"
         :class="classname"
         :id="id"
@@ -152,6 +153,35 @@
               this.$emit('keypress', event);
             },
 
+            /**
+             * Clear the input
+             */
+            clear() {
+              this.autocompleteText = ''
+            },
+
+            /**
+             * Focus the input
+             */
+            focus() {
+              this.$refs.autocomplete.focus()
+            },
+
+            /**
+             * Blur the input
+             */
+            blur() {
+              this.$refs.autocomplete.blur()
+            },
+
+            /**
+             * Update the value of the input
+             * @param  {String} value
+             */
+            update (value) {
+              this.autocompleteText = value
+            },
+
             // Bias the autocomplete object to the user's geographical location,
             // as supplied by the browser's 'navigator.geolocation' object.
             geolocate() {