Angular

Question

我做了一个这样的搜索框 where when I enter any character an autocomplete drops down. As you can see the texts behind the autocomplete is completely visible. How do I blur it out, like this

我试过 filter: blur(30px); 但没有任何反应。试过这个 HTML:

<div [class.filter]="input.value">
  <div class="form-field d-flex align-items-center">
    <div
      style="width: 3rem; height: 2rem"
      class="d-flex align-items-center justify-content-center"
    >
      <mat-icon>search</mat-icon>
    </div>
    <input
      #input
      type="text"
      class="input-search flex-grow-1 w-100"
      placeholder="Search for a food item ..."
      [formControl]="myControl"
      [matAutocomplete]="auto"
      (keyup)="onKeyUp($event)"
    />
    <mat-autocomplete #auto="matAutocomplete" [class.filter]="input.value">
      <mat-option *ngFor="let option of options" [value]="option.id">
        {{ option.name.en }}
      </mat-option>
      <button class="view-btn mb-2" mat-button *ngIf="options.length > 2" (click)="onClickViewAllResults()">View all results</button>
    </mat-autocomplete>
  </div>
</div>

CSS:

.form-field {
  display: flex;
  background: white;
  width: 31rem;
  border-radius: 25px 25px 25px 25px;
  border-style: 1px solid black;
  overflow: hidden;
}

.input-search {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgb(250, 85, 99);
  font-weight: 400;
  &:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
}

.filter{
  position: relative;
  z-index: 1000;
  &::before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    backdrop-filter: blur(1px);
    z-index: 100000;
  }
}

.view{
  padding-left: 10rem;
  padding-bottom: 0.8rem;
}

.view-btn{
  border-radius: 5rem;
  background-image: linear-gradient(to right, rgb(237,69,88), rgb(221, 0, 18));
  color: rgb(255, 255, 255);
  padding: 0.6rem;
  border: none;
  width: 10rem;
  margin-left: 10rem;
}

mat-icon {
  color: rgba(140, 177, 240, 0.74)
}

mat-autocomplete{
  filter: blur(30px);
}

但是没有用。上面的代码反而模糊了输入框。任何建议都会很有帮助。

Answer 1

它更容易，因为您在 mat-autocomplete (#auto) 中有一个模板引用变量

<input matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">

您可以在 div

中使用

<div [style.filter]="auto.isOpen?'blur(4px)':null">

或

<div [style.opacity]="auto.isOpen?'.2':null">

看到一个fool stackblitz

更新

如果您可以将不同的组件放在 div 下，与 mat-autocomplete 位于“同一位置”，问题就解决了。如果 div 和 mat-autocomplete 之间没有关系（例如，一个在父级中，另一个在路由器插座中，我们不能将路由器插座放在 div 下）唯一的方法是使用服务进行“通信”。该服务可以定义一个主题，而组件服务在构造函数中声明为 public

//a simple service
import {Subject} from 'rxjs'
@Injectable({
  providedIn: 'root',
})
export class MatAutoCompleteService {
  open:Subject<any>=new Subject<any>()
  constructor() {}
}

您声明为public

   constructor(public dataService:MatAutoCompleteService ){}

并在 mat 中使用自动完成事件 (opened) 和 (closed)

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
    (opened)="dataService.open.next(true)"
    (closed)="dataService.open.next(false)">

只订阅您需要的组件中的主题。或者您可以使用异步管道以 div 的方式“包装”您的组件

<div *ngIf="{open:dataService.open|async} as open" 
 [style.filter]="open.open?'blur(4px)':null">

    ..here your component..

</div>

另一个stackblitz

Angular - 如何在打字时模糊背景？

Angular - How to blur the background while typing?

html

css

autocomplete