Closed. This question needs to be more focused 。它目前不接受答案。












想改善这个问题吗?更新问题,使其仅通过 editing this post 关注一个问题。

3年前关闭。



Improve this question




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

提前致谢

最佳答案

我找到了另一种解决方法来做到这一点,我使用 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>

关于ionic-framework - 带有搜索栏的 Ionic2 ionic 选择,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41932373/

10-12 14:39
查看更多