选择后搜索文本中的IONIC自动完成选项不消失 [英] IONIC Autocomplete option in search text not disappearing after selection

问题描述

页面上有两个部分，切换后会切换页面上的选择列表

I have two segments on my page that switches the selection list on the page upon toggling them

<ion-segment [(ngModel)]="changeCart" color="primary">
        <ion-segment-button value="includeSeg" (ionSelect)="onSetEnclude()">
          <ion-icon name="add"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="excludeSeg" (ionSelect)="onSetExclude()">
          <ion-icon name="remove"></ion-icon>
        </ion-segment-button>
      </ion-segment>

在此细分下，有两个各自的搜索工具栏，它们将根据活动的细分显示在上.当用户手动键入某些内容时，该列表将显示在该内容下方，并且用户可以从中选择一个.但是之后，如果用户切换了细分，则列表将显示在屏幕上，直到用户开始在相应的搜索元素上键入为止.然后不正确的列表消失，出现正确的列表

Under this segment there were two respective search tool bar which will be displayed to the based on the active segment. When the user manually types something, the list is displayed under this and the user able to select one from it. But then after, if the user toggles the segment, the list displayed on the screen until the user starts typing in on the corresponding search element. Then the incorrect list disappears and the right list appears

当用户切换片段时，是否可以清除列表或隐藏离子列表?

When the user toggles the segment, Is there a way to either clean the list or hide the ion-list.

推荐答案

您可以根据ngModel的值来显示或隐藏这些列表.您可以通过在离子输入中添加一个类来实现此目的.

You could make those lists show or hide depending on that ngModel value. You could do this by adding a class to the ion-input.

<ion-input [class.hideList]="changeChart!=='includeSeg'">
...

和在CSS中:

.hideList {
   .theListsClassName{
       display: none;
   }
}

这篇关于选择后搜索文本中的IONIC自动完成选项不消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！