How to get city name from ion-input field in ionic 3? - ionic-framework

Question

Here I want to have only city name how simply I can get, I followed some blogs but kind of confused.
my html
<ion-input type="text" [(ngModel)]="default.city"></ion-input>
I am expecting something like
this.cityName = somefunction(inputText) {
...
return city;
}
I am looking for some ionic cordova plugin to autocomplete the typed location and list down the possible location and select one of them.

Answer 1

Depending on when you wish to show you autosearch results you can bind it to an event
<ion-input type="text" [(ngModel)]="default.city" (ionBlur)="someFunction()"></ion-input>
If you wish the autosearch results to come after he clicks out of the input box
you could use
(ionChange)="someFunction()" or (input)="someFunction()"
also if you need to
For Reverse geocoding you could use the geocoder plugin
https://github.com/sebastianbaar/cordova-plugin-nativegeocoder plugin
somefunction(inputText) {
this.nativeGeocoder.forwardGeocode('Berlin', options)
.then((coordinates: NativeGeocoderForwardResult[]) => {
this.autosearchresult = coordinates[0] // If you want one
})
.catch((error: any) => console.log(error));
}
and display it on the somwhere in the dom
<div (click)="completeauto()" *ngIf="showAutosearch">{{autosearchresult}}</div>
Keep in mind that you will also need some method to remove the search results and set the searchbar to the clicked value. If the user clicks on it.
Additionally if you have a Google Cloud Account you can activate the Google Places API which is more Robust than the Ionic Native version but you would require a credit card enabled account for it.
MapBox API also provides geocoding but I am not all that familiar with it.

Answer 2

If you have an Array of Object City cities, you can filter it by the name of the city in the following way
searchCityByName(searchText: any) {
const length = searchText.length;
console.log('filtering');
console.log(length);
if (length > 0) {
this.cities= this.cities.filter(city=> {
return city.name.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
});
}
}