ionic-framework - 带有搜索栏的 Ionic2 ionic 选择

Question

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

3年前关闭。




Improve this question




我需要创建一个带有搜索栏的 ionic 选择，这可能吗，我该怎么做？
我还尝试创建一个警报，其中包含一个搜索输入和一个单选选项，但我无法这样做，可能是因为我无法在同一个警报中混合不同的输入类型。

提前致谢

Answer 1

我找到了另一种解决方法来做到这一点，我使用了 PopoverController 而不是警报，它允许我在里面添加一个组件(在我的例子中它的名称是 AutoCompleteSearchPage )它包含搜索栏和列表以及我需要在那里使用的内容

import {
  PopoverController
}
  
from 'ionic-angular';
constructor(public navCtrl: NavController, public navParams: NavParams,
    public popoverCtrl: PopoverController) {



    let popover = this.popoverCtrl.create(AutoCompleteSearchPage, {
      
      dataContext: this.DataContext,
      autocomplete: this,
      ispopover: true,
    });
    popover.present({
      ev: myEvent
    });

搜索页面的 html 模板:

<ion-header>

  <ion-navbar>
      <ion-title>
          {{LookUpTableName}}
      </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <ion-searchbar (ionInput)="runSearch($event,viewmodel)" style="padding:5px"></ion-searchbar>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown"
                               pullingText="Pull to refresh"
                               refreshingSpinner="circles"
                               refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
    <ion-list>
        <button ion-item *ngFor="let item of dataList" (click)="selectItem(item)">
            {{item?.Name}}
        </button>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles"
                                     loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>