Ionic2のドロップダウンリストで検索バーを使用する方法

Question

サイズが非常に大きい国のドロップダウンリストがある登録フォームを作成しようとしています。私はドロップダウンリストの上に検索オプションを入れて、アクセスしやすいようにしたい。誰もがこれで私を助けることができますか？

home.html

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 

<form [formGroup]="myForm"> 
    <ion-item> 
     <ion-label>Dropdown1 :</ion-label> 
     <ion-select formControlName="dd" (ionChange)='f($event)' #dd> 
      <ion-searchbar></ion-searchbar> 
      <ion-option value='1'>A</ion-option> 
      <ion-option value='2'>B</ion-option> 
      <ion-option value='3'>C</ion-option> 
      <ion-option value='4'>D</ion-option> 
     </ion-select> 
    </ion-item> 



</form> 
</ion-content> 

home.ts質問は非常に一般的である

import { Component } from '@angular/core'; 

import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController) { 

    } 

    function f(event){ 
    alert(event); 

    } 

} 

Answer 1

私はこの問題に対する別のアプローチを提案します。国を選択するためのドロップダウンリストを使用する代わりに、TYPEAHEADと呼ばれるこの涼しいng2-bootstrapの機能を使用することができます。どのように機能するのですか？あなたは簡単な入力フィールドを持っているだけで、あなたの国の名前を入力するだけで、1文字でもリストがポップアップしたり、ユーザーが何かを入力したときにリストのポップアップをクリックして結果をフィルタリングすることができます。私はplaceholderを追加することをお勧めします。ユーザーはこれがどのように機能しているか、「入力を開始して国がポップアップする」などを理解するでしょう。どのように動作するのか確認できます。hereとng2-bootstraphereのインストール方法があります。

Answer 2

：ここに私のコードです。私は、あなたがあなたの仕事を達成しようとした後にあなたが処理できない何かを尋ねることをお勧めします。検索バーを使用してカスタムコンポーネントを作成することですあなたの意見や質問が最善の解決策を更新考慮に入れると

：

はとにかくあなたがIonic Docs

UPDでやろうとしているとまったく同じ例がありますチェックボックスを含む項目のリスト。あなたはそれをドロップダウンにすることも、イオンモーダルコンポーネントで表示することもできます。 ngModelで動作させるか、選択した値を返すだけです。