Блог

Я пытаюсь создать регистрационную форму, в которой у меня есть выпадающий список стран, который имеет очень большой размер. Я хочу включить опцию поиска в верхней части выпадающего списка, чтобы обеспечить удобство доступа. Кто-нибудь может мне помочь с этим? Вот мой код:

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

  }

}
  

Я бы предложил другой подход к этой проблеме. Вместо того, чтобы использовать выпадающий список для выбора страны, вы можете использовать эту классную ng2-bootstrap функцию под названием TYPEAHEAD. Как это работает? У вас есть простое поле ввода, и все, что вам нужно сделать, это просто начать вводить название вашей страны, достаточно даже одного символа, и появится список, или вы можете создать всплывающий список по щелчку мыши, а затем фильтровать результаты, когда пользователь что-то вводит. Я предлагаю также добавить placeholder , чтобы пользователи лучше понимали, как это работает, возможно, «Начните вводить, и появится ваша страна» или что-то в этом роде. Вы можете проверить, как это работает здесь, и вы можете найти инструкции по установке ng2-bootstrap здесь.

Вопрос очень общий. Я бы предположил, что вы задали что-то, с чем вы не можете справиться после того, как попытаетесь выполнить свою задачу.

В любом случае есть точно такой же пример, который вы пытаетесь сделать в Ionic Docs

UPD:

Принимая во внимание ваши комментарии и обновление вопросов, лучшим решением было бы создать свой пользовательский компонент с панелью поиска и списком элементов с флажками. Вы можете сделать это выпадающим списком или отобразить его в ионном модальном компоненте. Вы можете заставить его работать с ngModel или просто возвращать выбранные значения.