使用搜索而不是数据列表创建下拉列表的正确方法是什么?

Question

我正在尝试使用后端调用创建一个可搜索的输入。而不是使用数据列表，我想使用 ul 和 li 项创建自定义 UI。我能够让搜索功能正常工作，但 UI 似乎有滑移，我试图在输入聚焦时显示 ul，但是当我在选择项目之前尝试使用输入模糊来隐藏 ul 时，模糊被触发并隐藏 ul。在这种情况下，正确的 css 应该是什么。

<input placeholder (blur)=“focussed=false” (focus)=“focussed=true” (keyup)=“filterData($event.target.value) ”/>
<ul *ngIf=“focussed”>
<li *ngFor=“item of filteredItems” >{{item}}</li>
</ul> 

Answer 1

对于项目选择，您可以使用(mousedown)而不是(click)因为鼠标按下事件比模糊具有更高的优先级，鼠标按下事件将首先触发

假设您有一个用于选择列表项的选择处理程序，则可以将li标记替换为

<li *ngFor="let item of filteredItems" (mousedown)="handleItemClick(item)">
{{item}}
</li>

您可以在handleItemClick方法中将焦点设置为false，该方法仅在选择项目后关闭列表。

handleItemClick(item){
// your code
this.focussed = false; // to close the list
}