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

2023年6月29日 229次阅读

我正在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.如果您正在搜索或显示鼠标是否在列表上,则显示列表.

点赞