Question

我希望在离子2应用程序中进行自动完成输入。它用于选择国家，理想情况下，在3个字符之后，查询将开始firebase，然后在文本字段下输出选项 - 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并直接前往孟加拉国，因为用户输入了＆＃34; Bang＆＃34;我这样做的功能看起来像我也尝试添加startAt（国家）.endAt（国家），但它也没有用。

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()。{/ p>

每次进入该视图时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>

Firebase和Ionic 2自动填充

1 个答案:

修改