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

问题非常笼统。我建议你在尝试完成任务后问一些你无法处理的事情。

无论如何，您在Ionic Docs

尝试做的事情完全相同

UPD：

考虑到您的评论和问题更新，最佳解决方案是使用搜索栏和带复选框的项目列表创建自定义组件。您可以将其设为下拉列表，或将其显示在离子模态组件中。您可以使用ngModel或只返回选定的值。

Answer 2

我建议采用不同的方法解决这个问题。您可以使用名为 TYPEAHEAD 的酷ng2-bootstrap功能，而不是使用下拉列表来选择国家/地区。它是如何工作的？你有简单的输入字段，所有你需要做的只是开始输入你所在国家的名字，即使一个字符就足够了，列表弹出，或者你可以点击弹出列表，然后在用户输入内容时过滤结果。我建议添加一个placeholder，以便用户更好地了解其工作原理，也许＆＃34;开始输入，您的国家/地区会弹出＆＃34;或者类似的东西。您可以查看其工作原理here，然后您可以找到有关安装ng2-bootstrap here的说明。

如何在Ionic2的下拉列表中使用搜索栏

2 个答案: