单击侧面或退出按钮时下拉菜单必须消失

Question

我创建了一个输入，在这个输入中，当任何人在其中搜索时，将显示自动建议产品列表。但是，当任何人单击网页上的任何位置时，此下拉菜单都会保持原样。所以我需要修改代码，这样当任何人点击网页时，下拉菜单就会消失。

  <div style="position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0;">
          <input type="text" class="form-control border-radius-none h-auto" placeholder="Search for All Products"
            aria-label="Search" aria-describedby="basic-addon1" name="searchInput" #searchbar
            (keyup)="fetchSeries($event)" [(ngModel)]="searchInput">
          <ul style="position:absolute;z-index:1;
          background: white;color: black;
          padding:0px 15px;max-height:70vh;overflow-y: scroll; width: 100%;" 
            class="list-unstyled itemsearch">
            <li *ngFor="let show of searchResult" class="py-2 border-top border-secondary">
              <div class="row align-items-center">
                <div class="col-md-2 d-flex justify-content-center align-items-center"
                  style="width: 100px; height: 50px;">
                  <img [src]="API_BASE_URL + show.imgPaths[0]" class="img-fluid d-inline-block mx-auto"
                    style="max-width: 100%; max-height: 100%;" />
                </div>
                <div class="col-md-6 py-2">
                  <h4 class="text-dark mb-0">{{show.productName}}</h4>
                  <h5 class="text-secondary mb-0">{{show.manufacturer}}</h5>
                </div>
                <div class="col-md-4 d-flex flex-column align-items-end">
                  <div class="text-center">
                    <h4 class="text-dark mb-0">Rs.{{show.finalPrice}}/-</h4>
                    <app-addtocart [id]="show._id"></app-addtocart>
                  </div>
                </div>
              </div>

            </li>
          </ul>
        </div> 

Answer 1

您可以尝试在列表中显示“显示：无”，向正文添加点击侦听器。

<script>
    document.body.addEventListener('click', () => {
      document.querySelector("ul.list-unstyled.itemsearch").style.display = 'none';
    });
</script>

Answer 2

你可以通过监听文档点击事件来实现这一点

1. 在构造函数中添加 ElementRef 依赖

   构造函数（私有 eRef：ElementRef）{}

2. 监听文档的点击事件

   @HostListener('document:click', ['$event']) 点击（事件）{ if(!this.eRef.nativeElement.contains(event.target)) { //这里添加你的代码 } }