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

Answer 2

〜.autocomplete将属性应用于元素的同级。因此，与其将其应用于div，不如将其应用于mdb-card

等待点击，然后再失去焦点

2 个答案: