Question

在这里，我只想获得城市名称，我只关注城市名称，我关注了一些博客，但有些困惑。

我的html

<ion-input  type="text" [(ngModel)]="default.city"></ion-input>

我期望类似

this.cityName = somefunction(inputText) {
 ...
 return city; 
}

我正在寻找一些离子式Cordova插件来自动完成键入的位置并列出可能的位置并选择其中之一。

Answer 1

取决于何时希望显示自动搜索结果，可以将其绑定到事件

<ion-input  type="text" [(ngModel)]="default.city" (ionBlur)="someFunction()"></ion-input>

如果您希望自动搜索结果在他从输入框内单击后出现

您可以使用

 (ionChange)="someFunction()" or  (input)="someFunction()"

如果需要的话

对于反向地理编码，您可以使用地理编码器插件 https://github.com/sebastianbaar/cordova-plugin-nativegeocoder插件

somefunction(inputText) {
 this.nativeGeocoder.forwardGeocode('Berlin', options)
  .then((coordinates: NativeGeocoderForwardResult[]) => {
      this.autosearchresult = coordinates[0] // If you want one
 })
.catch((error: any) => console.log(error));
}

并将其显示在dom的某处

<div (click)="completeauto()" *ngIf="showAutosearch">{{autosearchresult}}</div>

请记住，您还需要一些方法来删除搜索结果并将搜索栏设置为单击的值。如果用户单击它。

此外，如果您拥有Google Cloud帐户，则可以激活比Ionic Native版本更健壮的Google Places API，但是您需要为此帐户启用信用卡。

MapBox API还提供了地理编码，但是我对此并不十分了解。

Answer 2

如果您有对象城市cities的数组，则可以通过以下方式按城市名称过滤它

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;
      });
    } 
  }

如何从ionic 3的离子输入字段中获取城市名称？

2 个答案: