当用户在搜索框外单击时,角度搜索框需要消失

发布时间：2020-12-17 17:10:49 所属栏目：安全来源：网络整理

导读：我正在Angular(4)中创建一个包含搜索框的应用程序.当用户搜索时,搜索变量变为true.当用户在搜索框外部点击时,此变量需要变为false. 我有gotton这个用于处理(模糊)和(焦点)属性： mat-form-field class="full-width" input matInput #searchBox (blur)="searc

我正在Angular(4)中创建一个包含搜索框的应用程序.当用户搜索时,搜索变量变为true.当用户在搜索框外部点击时,此变量需要变为false.

我有gotton这个用于处理(模糊)和(焦点)属性：

<mat-form-field class="full-width">
  <input matInput #searchBox (blur)="searching = false" (focus)="searching = true" placeholder="{{ placeHolder }}" autocomplete="off" (keyup)=search(searchBox.value) />
</mat-form-field>
<div class="dropdown">
    <ul [hidden]="!searching">
      <li (click)="outputProduct(product1)"> Option 1 </li>
      <li (click)="outputProduct(product2)"> Option 2 </li>
    </ul>
</div>

然而现在的问题是,如果用户点击其中一个搜索结果,则现在不调用outputProduct(product)函数.这可能是因为[hidden]属性阻止了click事件到达我的列表项.实现此功能的正确方法是什么？

解决方法

尝试添加另一个布尔变量来检查列表结果是否有焦点.

app.component.ts

export class AppComponent  {
  ...
  searching = false;
  focusOnList = true;
}

app.component.html

<div (mouSEOut)="focusOnList=false">
<mat-form-field class="full-width">
  <input matInput #searchBox (blur)="searching=false" (focus)="searching = true" placeholder="{{ placeHolder }}" autocomplete="off" (keyup)=search(searchBox.value) />
</mat-form-field>
<div *ngIf="searching || focusOnList" class="dropdown" (mouSEOver)="focusOnList=true" (focus)="focusOnList=true">
    <ul>
      <li (click)="outputProduct(product1)"> Option 1 </li>
      <li (click)="outputProduct(product2)"> Option 2 </li>
    </ul>
</div>
</div>

当你从整个div中聚焦时,变量focusOnList被设置为false.如果您正在搜索或显示鼠标是否在列表上,则显示列表.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!