Angular 6 中的可扩展搜索栏

Posted 2023-03-13

【中文标题】Angular 6 中的可扩展搜索栏

【英文标题】：Expandable search bar in Angular 6

【发布时间】：2019-01-24 07:20:24

【问题描述】：

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

My Code

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

【参考方案1】：

您必须使用 ngClass，我在单击时添加“填充”类，如果模糊且没有值则删除

<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;

【讨论】：

谢谢@Eliseo.. 它正在工作..:) 当搜索栏有 vale 时，您能帮我吗？然后在该按钮上会显示一个十字按钮，搜索栏的点击值将清除。你能帮帮我吗

它只是使用 *ngIf="filled" 添加一个按钮。注意：在你的 .ts 中添加一个变量。注意2：我的按钮很丑，但这只是一个想法

【参考方案2】：

您可以在搜索输入上放置条件类，该类仅在它具有非空值时才存在，然后专门针对您的 CSS。比如：

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

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