vue Address: listen to adresssSelector to automatically fill street/number fields

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -4,6 +4,8 @@
       <VueMultiselect
          id="addressSelector"
          v-model="value"
+         @search-change="listenInputSearch"
+         ref="addressSelector"
          @select="selectAddress"
          name="field"
          track-by="id"
@@ -17,7 +19,8 @@
          :options="addresses">
       </VueMultiselect>
    </div>
-   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
+
+   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)">
       <div class="col-10">
          <div class="form-floating">
             <input class="form-control"
@@ -60,6 +63,12 @@ export default {
       writeNewPostalCode() {
          return this.entity.selected.writeNew.postCode;
       },
+      isAddressSelectorOpen() {
+         return this.$refs.addressSelector.$data.isOpen;
+      },
+      isEnteredCustomAddress() {
+         return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
+      },
       addresses() {
          return this.entity.loaded.addresses;
       },
@@ -90,6 +99,36 @@ export default {
          this.entity.selected.address.streetNumber = value.streetNumber;
          this.updateMapCenter(value.point);
       },
+      listenInputSearch(query) {
+         //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
+         if (this.isAddressSelectorOpen) {
+            this.$data.value = { text: query };
+         } else if (this.isEnteredCustomAddress) {
+            let addr = this.splitAddress(this.$data.value.text);
+            this.entity.selected.address.street = addr.street;
+            this.entity.selected.address.streetNumber = addr.number;
+         }
+      },
+      splitAddress(address) {
+         let substr = address
+            .split(',')
+            .map(s => s.trim());
+         if (substr.length === 1) {
+            substr = address.split(' ');
+         }
+         let decimal = [];
+         substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
+         if (decimal[0] === true) {
+            return { number: substr.shift(),
+               street: substr.join(' ') }
+         }
+         else if (decimal[decimal.length - 1] === true) {
+            return { number: substr.pop(),
+               street: substr.join(' ') }
+         }
+         return { number: '',
+               street: substr.join(' ') }
+      },
       addAddress() {
          this.entity.selected.writeNew.address = true;
       }