我有一个搜索下拉菜单,它会在搜索输入获得焦点时显示建议。 问题是我有这样的代码,当这个输入失去焦点时下拉菜单关闭。这就是我想要的方式,但问题是,只要我点击任何建议,该框就会在为该建议注册点击之前关闭。
我的代码:- 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);
}
已经搞了一天多了。非常感谢任何帮助。
最佳答案
在您的 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
属性。
关于html - 在失去焦点之前等待点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56777194/