如何定位 google 自动完成预测？

Question

我有一个 table 联系人列表，如图所示。我还有一个事件会在单击一行时触发，因此它可以显示选定的联系人详细信息（我正在使用 angular NGIF 指令来显示和隐藏详细信息）

问题是因为我的 google 输入被放置在 NGIF 块中，当用户展开联系人详细信息并尝试输入时，预测 (pac-container) 显示在我单击（在 table 内）而不是在 google 输入自动完成搜索框下方。

我试图操纵 class pac-container 的 css 但我想不出一种方法来覆盖 class 的 css ].

这是我的 html 自动完成搜索框

<div *ngIf="showGoogleAddress" class="mg-b-10" fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlexFill>
          <div fxFlex>
            <mat-form-field appearance="outline" class="form-field">
              <mat-label>Google Address Search Box</mat-label>
              <input [debounceTime]="500" ngxAutocomPlace autocomplete="off" (selectedPlace)="placeChanged($event)" placeholder="ex: Phoenix, Arizona" matInput #googleAddress="matInput" >
              <mat-icon matSuffix>location_on</mat-icon>
              <mat-hint>Search for compolete address, or city</mat-hint>
            </mat-form-field>
          </div>

        </div>

另外，这是展开详细信息后的整个表格的屏幕截图

如果 google 自动完成框在 NGIF 之外，那么它将毫无问题地呈现预测。似乎因为我使用的是 NGIF 指令，所以 google 组件无法确定正确的位置（计算正确的位置）来呈现其预测..

当我尝试时

.pac-container {
  position: absolute !important;
  z-index: 100000;
}

没用。

Answer 1

我不得不采用 DOM 使用 JS 的操作方式..所以我在 google 搜索框上添加了一个 (keyUp) 事件处理程序，使用如下方法计算位置：

adjustResPosition() {
      setTimeout(() => {
        var gSearchBar = document.getElementById('googleBar');
        var topPos = (gSearchBar?.getBoundingClientRect().top || 0) + window.scrollY + 25;
        var leftPos = (gSearchBar?.getBoundingClientRect().left || 0) + window.scrollX;

        var gPreds = document.querySelector('.pac-container');
        gPreds?.setAttribute('style', `top: ${topPos}px; position: absolute!important; width: auto; left: ${leftPos}px`);
      }, 600);
    }

我将 setTimeout 设置为 600 毫秒的原因是因为我每次都有 500 毫秒的去抖动，直到它获取下一个预测并将其放入 pac-container div

请注意，这不是最佳解决方案，可以通过 ViewChild 或 ElementRef

进行改进

如何定位 google 自动完成预测？

How to position google autocomplete predictions?

css

angular

google-maps-api-3