Unable to show selected dropdown value in the input field

@ShankarGuru wrote:

I am using google-maps autocomplete in my ionic project.I have an issue with the input field i,e search box, When search an place for Ex: Delhi. When i type del, the autocomplete will suggest as delhi,India as in below image:

But when i select delhi. in the input field(i,e search box) is still showing what i typed i,e del like this:

But i want to display the the selected place full name(i,e Delhi,India) from the dropdown after clicking.

Below is my CODE:

HTML

 <ion-header>
      <ion-toolbar color="primary">
        <ion-searchbar [(ngModel)]="autocomplete.input"  (ionInput)="updateSearchResults()" placeholder="Search for a place"></ion-searchbar>
      </ion-toolbar>
    </ion-header>
    
    
    <ion-content>
    
      <ion-list [hidden]="autocompleteItems.length == 0" >
        <ion-item *ngFor="let item of autocompleteItems"  tappable (click)="selectSearchResult(item)">
          {{ item.description }}
        </ion-item>
      </ion-list>
    
      <div id='map' hidden></div>
    </ion-content>

TS

 import { Component, NgZone } from '@angular/core';
    import { Geolocation } from '@ionic-native/geolocation/ngx';
    import { LoadingController } from '@ionic/angular';
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    data  = '';
    
    map: any;
    markers: any;
    autocomplete: any;
    GoogleAutocomplete: any;
    GooglePlaces: any;
    geocoder: any;
    autocompleteItems: any;
    loading: any;
    latitude: any;
    longitude: any;
    
    constructor( public zone: NgZone, private geolocation: Geolocation, public loadingCtrl: LoadingController) {
      this.geocoder = new google.maps.Geocoder();
      const elem = document.createElement('div');
      this.GooglePlaces = new google.maps.places.PlacesService(elem);
      this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
      this.autocomplete = {
        input: ''
      };
      this.autocompleteItems = [];
      this.markers = [];
      this.loading = this.loadingCtrl.create();
    }
    
      ionViewDidEnter() {
        //Set latitude and longitude of some place
        this.map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: 10.9277952, lng: 53.87455966},
          zoom: 15
        });
      }
    
      updateSearchResults() {
        if (this.autocomplete.input === '') {
          this.autocompleteItems = [];
          return;
        }
        this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete.input },
          (predictions, status) => {
            this.autocompleteItems = [];
            if (predictions) {
              this.zone.run(() => {
                predictions.forEach((prediction) => {
                  this.autocompleteItems.push(prediction);
                });
              });
            }
        });
      }
    
      selectSearchResult(item) {
        this.clearMarkers();
        this.autocompleteItems = [];
    
        this.geocoder.geocode({placeId: item.place_id}, (results, status) => {
          if (status === 'OK' && results[0]) {
          this.latitude = results[0].geometry.location.lat();
          this.longitude = results[0].geometry.location.lng();
          console.log('Latitute is ' +  + this.latitude);
          console.log('Longitude is ' +  + this.longitude);
    
          const marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: this.map
            });
          this.markers.push(marker);
          this.map.setCenter(results[0].geometry.location);
          }
        });
      }
    
      clearMarkers() {
        for (var i = 0; i < this.markers.length; i++) {
          this.markers[i].setMap(null);
        }
        this.markers = [];
      }
    
    }

Posts: 1

Participants: 1

Read full topic