检测元素是否在Angular2中具有焦点-Java 学习之路

我在输入上使用（focus）=“showSearchList = true”显示文本输入的自动完成下拉列表，并使用（blur）=“showSearchList = false”再次隐藏它 .

我的问题是，如果单击下拉列表中的一个结果，我想触发另一个方法，但是通过单击下拉列表中的元素，我将触发输入的模糊方法，因此下拉结果不会被点击 . 这项工作的最佳方法是什么？我使用的是ES6，而不是打字稿，我正在努力在Google上找到任何东西 .

这是我到目前为止的模板：

<div id="searchContainer">
    <input [(ngModel)]="search"
           (ngModelChange)="filterSearch()"
           (focus)="showSearchList=true;"
           (blur)="showSearchList=false"
           type="text"
           id="searchJobs"
           placeholder=" Search"/>
    <div *ngIf="showSearchList"
         id="searchDropdown">
        <p *ngFor="let result of filteredSearchResults; let index = index;"
            (click)="addResultToResults(index); search='';">
            {{result}}
        </p>
    </div>
</div>

我认为不是在模糊时将showSearchList设置为false，而是可以调用一个方法来检查哪个元素具有焦点，并根据它隐藏下拉列表，或运行我的addResultToResults方法然后隐藏下拉列表，但我不知道如何检查哪个元素在angular2中有焦点 .

会喜欢这方面的一些反馈！

1 回答

2

我建议使用 mouseleave 事件来控制 searchlist 并从 input 元素移动 blur 事件 . 如果您想在 searchlist 中单击项目后显示，则可以与 click 事件结合使用 .

Plunker demo .

回复于 2024-04-20T02:15:05+08:00

检测元素是否在Angular2中具有焦点

1 回答

相关问题