html - 在失去焦点之前等待点击

Question

我有一个搜索下拉菜单，它会在搜索输入获得焦点时显示建议。问题是我有这样的代码，当这个输入失去焦点时下拉菜单关闭。这就是我想要的方式，但问题是，只要我点击任何建议，该框就会在为该建议注册点击之前关闭。

我的代码:-HTML:-

<div id="demo-2">
 <input
   type="search"
   placeholder="Search By Title, Author"
 />
 <div class="autocomplete">
   <mdb-card *ngFor="let book of books" (click)="logger(book.id)">
     <!--some code-->
   </mdb-card>
 </div>
</div>

CSS:-

#demo-2 input[type="search"]:focus {
  width: 275px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  ~ .autocomplete {
    visibility: visible;
  }
}

.autocomplete {
  height: 350px;
  width: 275px;
  position: absolute;
  visibility: hidden;
  overflow: auto;
}

ts(摘录):-

  logger(id) {
    console.log(id); 
  }

已经搞了一天多了。非常感谢任何帮助。

Answer 1

在您的 TS 中创建一个变量 isVisible:

isVisible = false;

logger(id) {
  console.log(id);
  isVisible = false;
}

hide() {
  isVisible = false;
}

inputClicked() {
  isVisible = true;
}

还有你的 HTML:

<div id="demo-2">
 <input
   type="search"
   placeholder="Search By Title, Author" (focusout)="hide()"
 />
 <div class="autocomplete" [ngStyle]="{'visibility':isVisible ? 'visible' : 'hidden'}">
   <mdb-card *ngFor="let book of books" (click)="logger(book.id)">
     <!--some code-->
   </mdb-card>
 </div>
</div>

从您的 CSS 中移除 visibility 属性。