Angular 6 中的可扩展搜索栏

Question

我正在使用 Angular 6，我想为我在下面编写的代码做可扩展的搜索栏。

现在我的问题是我想在 focusout 的搜索框中输入值后停止转换。如果搜索栏为空，则会发生转换。请帮忙

Answer 1

您可以将条件 class 放在您的搜索输入上，只有当它具有非空值时才会出现，然后专门针对您的 CSS。类似于：

<input type="search" [class.has-value]="searchValue" placeholder="Search">

input[type=search]:focus, input.has-value {
   ...
}

Answer 2

你必须使用 ngClass，我在单击时添加 class "filled"，如果模糊且没有值则删除

<div class="right">
  <form id="search">
    <input #search type="search" placeholder="Search" [ngClass]="{'filled':filled}" 
         (click)="filled=true" (blur)="filled=search.value?true:false"> 
  </form>
</div>

//remove in your css
//#search input[type=search]
//And add (is the same adding .filled)
#search input[type=search].filled
{
  width: 400px;
  padding-left: 32px;
  color: #4a83c0;
  background-color: #fff;
  cursor: auto;

}

更新关闭按钮可以这样

<div class="right">
  <form id="search">
    <input #search type="search" [placeholder]="filled?'Search':''" [ngClass]="{'filled':filled}" 
         (click)="filled=!filled" (blur)="filled=search.value?true:false">
         <button class="close" *ngIf="filled" (click)="search.value='';filled=false">X</button>
  </form>
</div>
.close
{
  z-index:10;
  margin-left:-3rem;
  margin-right:1rem;
}

Angular 6 中的可扩展搜索栏

Expandable search bar in Angular 6

typescript

angular2-forms

angular

angular5

angular6