javascript - 如何通过关注离子输入/不关注离子输入来单击打开和关闭的项目列表

Question

在 Ionic Angular 中，我要求用户在离子输入中输入一个 ip。为了帮助用户，当他在 ion-input 中输入文本时，会出现一个包含以前搜索过的 ips 的项目列表。此列表的显示要归功于一个变量，当焦点设置在离子输入上时设置为 true，而当离子输入失去焦点时设置为 false。

我想将离子输入值设置为单击的项目的值。不幸的是，当我单击该项目时，离子输入失去焦点，列表隐藏并且不考虑单击该项目。

我可以通过在我的模糊函数中使用“setTimeout”来解决这个问题，但我想知道是否存在适当的解决方案，同时在输入失去焦点时仍然能够隐藏列表（例如单击页面上的其他位置）。

当前解决方案

• HTML

           <ion-item>
               <ion-label position="floating">Robot Manager IP</ion-label>
               <ion-input  
                   [(ngModel)]   ="rmIpBuf"
                   (ionBlur)     ="showBlur($event)"
                   (ionFocus)    ="onFocus('ip',$event)">    
               </ion-input>         
           </ion-item>
  
           <div *ngIf="isShowIpList === true">
               <ion-row *ngFor="let searchIp of searchedIps, let i = index">
                   <ion-col size=12 class="ion-text-center" >
                       <ion-item  button  (click)="addToInput('ip',searchIp,$event)">
                           <ion-text color='medium'>{{searchIp}}</ion-text>
                       </ion-item>
                   </ion-col>
               </ion-row>
           </div>
  

• .ts

  showBlur(ev) 
   {
       setTimeout(() => {
           this.isShowIpList = false
       }, 400);
  
      this.isShowIpList = false  
   }
  

'''

onFocus(paramInputType: string,ev:Event)
    {   
       this.isShowIpList   = true;
    }

addToInput(type:string, value,ev:Event)
{
   this.rmIpBuf = value;
}

'''

我还具有管理运行正常的 searchList 的功能。这里不重要。

如果您知道更清洁、更好、更智能、更快或更强大的解决方案，请告诉我 :) ！

标签： javascriptangulartypescriptionic-framework