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

问题描述

我创建了一个输入,在此输入中,当任何人进行搜索时,都会显示自动建议产品列表。但是,当任何人单击网页上的任意位置时,此下拉列表将保持不变。因此,我需要修改代码,以便当任何人单击网页时,下拉列表都应该消失。

  <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> 

解决方法

您可以尝试在列表中“显示:无”,将点击侦听器添加到正文中。

BIO<-c('posttranslational protein folding (GO:0051084)',"'de novo' protein folding (GO:0006458)",'posttranslational protein folding (GO:0051085)',"'de novo' protein folding (GO:0006451)",'posttranslational protein folding (GO:0051086)',"'de novo' protein folding (GO:00064582)",'posttranslational protein folding (GO:0051087)',"'de novo' protein folding (GO:00064583)",'posttranslational protein folding (GO:00510844)',"'de novo' protein folding (GO:00064588)",'posttranslational protein folding (GO:00510855)',"'de novo' protein folding (GO:00064511)",'posttranslational protein folding (GO:00510866)',"'de novo' protein folding (GO:000645822)",'posttranslational protein folding (GO:00510877)',"'de novo' protein folding (GO:000645833)")