Question

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

提前致谢

Answer 1

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

＆＃13;

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

＆＃13;

搜索页面的html模板：

＆＃13;

<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>

＆＃13;

Answer 2

String myString = "Hello " + "to " + "everyone " + "in " + "the " + "world!";

现场演示 - http://plnkr.co/edit/BX323jPnqfgGTZCU1Ta3?p=preview

Ionic2离子选择搜索栏

2 个答案: