Firebase 和 Ionic 2 自动完成

Question

我希望在 ionic 2 应用程序中进行自动完成输入。它用于选择国家，理想情况下，在 3 个字符之后，查询将开始触发，然后在文本字段下输出选项 - json 的结构如下

    {
        "country ": {
            "BD": "Bangladesh",
            "BE": "Belgium",
            "BF": "Burkina Faso",
            "BG": "Bulgaria",
            "BA": "Bosnia and Herzegovina",
            "BB": "Barbados",
            "WF": "Wallis and Futuna",
            "BL": "Saint Barthelemy",
            "BM": "Bermuda",
            "BN": "Brunei"
        }
    }

我真正需要的是跳过密钥，因此跳过 BD 并直接前往孟加拉国，因为用户键入“Bang”我这样做的功能看起来像所以我也尝试添加 startAt(country).endAt(country) 但是它也没有工作。

selectCountry(){
    const country = this.country;
    if( country.length >= 3){
        fire.instance().database().ref('country').on('value', (snapshot) => {
                const msg = snapshot.val(); 
                console.log("country " + msg);   
              });    
    }
}

组件的 html 看起来像这样

<ion-list>
<ion-list-header>
  Country
</ion-list-header>
<ion-item>
<ion-input (input)="selectCountry($event.target.value)" [(ngModel)]="country" ></ion-input>
</ion-item>      

Answer 1

这是 firebase 上的静态节点吗？当用户在输入或在这个视图上时，他可以在国家节点上插入更多数据吗？

如果不是，那么您所做的就是不好的，因为每次用户键入它都会调用数据库。

如果你这样做会更好：

---

使用 NavController ´ionViewWillLoad()` 方法从国家节点获取所有内容并保存到变量中。由于您不想知道必须遍历承诺的密钥：

countries: any[] = [];
ionViewWillEnter(){
  fire.instance().database().ref('country').on('value', (snapshot) => {
    for (var c in snapshot.val()){
      this.countries.push(snapshot.val()[c]);
      console.log("country " + snapshot.val()[c]); 
    }
  });  
}

创建一个用于重置国家/地区的初始化方法和过滤后的国家/地区的变量：

countriesFiltered: any[];
initialize(){ this.countriesFiltered = this.countries; }

创建一个类似于 Ionic 2 文档中的过滤器方法，您不需要传递 $event.target.value，只需传递 $event：

selectCountry(ev: any) {
  // Reset items back to all of the items
  this.initialize();

  // set val to the value of the searchbar
  let val = ev.target.value;

  // if the value is an empty string don't filter the items
  if (val && val.trim() != '') {
    this.countriesFiltered= this.countriesFiltered.filter((item) => {
      return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
  }
}

这样，您只需调用一个数据库即可获取所有国家/地区，并将它们保存在您可以更轻松地使用的变量中。如果您愿意，您可以使用加载来防止用户单击任何地方或在没有准备好所有国家/地区的情况下开始搜索。

如果稍后的视图输入更多国家/地区，您可以使用ionViewWillEnter() 而不是ionViewWillLoad()。

WillEnter 会在您每次进入该视图时执行，如果您来回移动，WillLoad 只会在您进入它时执行一次，如果视图被销毁/卸载并且您再次进入它。

希望对你有帮助：D

编辑

而且，如果您不知道，则需要在屏幕上的某个位置显示您的国家/地区，因此请使用带有卡片的*ngFor 或类似的东西来显示和过滤，如下所示：

<ion-list>
    <ion-item *ngFor="let c of countriesFiltered">
    <!-- with searchbar always use the filtered variable -->
        {{c}}
    </ion-item>
</ion-list>