PCF控件地址建议位置调整：如何让建议显示在搜索框而非标签下方

要让地址建议显示在搜索框下方，核心是调整DOM结构和CSS定位逻辑，具体步骤如下：

1. 调整DOM结构，将搜索框与建议框绑定到同一父容器 #

修改TS代码，新增搜索框容器，把搜索框和地址建议框放入其中，确保两者层级关联：

// 创建搜索框容器
this.searchContainer = document.createElement("div");
this.searchContainer.className = "search-container";

// 配置并添加搜索框到容器
this.searchBox.setAttribute("id", "searchBox-" + this.uniqueId);
this.searchBox.setAttribute("type", "search");
this.searchBox.className = "text control";
this.searchBox.setAttribute("placeholder", "For eg: 101 victoria park");
this.searchContainer.appendChild(this.searchBox);

// 创建地址建议框并加入容器（若未定义则新增）
this.suggestionBox = document.createElement("div");
this.suggestionBox.className = "address-suggestions";
this.searchContainer.appendChild(this.suggestionBox);

// 将标签容器和搜索容器依次加入主控件
this.container.appendChild(this.searchBoxLabelDiv);
this.container.appendChild(this.searchContainer);

2. 修改CSS，设置正确的定位规则 #

更新CSS文件，添加容器和建议框的定位样式，确保建议框紧贴搜索框底部：

.control {
  background: transparent;
  border-style: none;
  height: 35px;
  line-height: 35px;
  padding-left: 0em;
  padding-right: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  outline: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

/* 搜索框容器：设置相对定位，作为建议框的定位参考 */
.search-container {
  position: relative;
  width: 90%; /* 和原搜索框宽度保持一致 */
}

/* 搜索框：改为继承容器宽度，确保和建议框宽度匹配 */
.text.control {
  width: 100%;
}

/* 地址建议框：绝对定位紧贴搜索框底部 */
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-top: none;
  z-index: 1000; /* 确保建议框不被其他元素覆盖 */
  max-height: 220px;
  overflow-y: auto;
}

/* 可选：优化建议项hover样式 */
.address-suggestions .suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
}

.address-suggestions .suggestion-item:hover {
  background-color: #f5f5f5;
}

原理说明 #

原问题中地址建议框的定位参考点错误（关联到了标签容器），通过将搜索框和建议框放入同一position: relative的容器，让建议框的绝对定位以该容器为基准；top: 100%确保建议框刚好在搜索框底部，left:0; right:0让宽度和搜索框完全对齐。

内容的提问来源于stack exchange，提问作者Priyanka Maru