在失去焦点之前等待单击

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

(节选)：-

  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属性。

Answer 2

~.autocomplete将对元素的同级应用属性。因此，与其将其应用于div，不如将其应用于mdb卡上。