react-places-autocomplete 下推其他组件

Question

我一直在努力解决这个问题。使用最新的 README.md githun repo 中给出的相同示例正在推送下面的其他组件，这并不是更好的用户体验。我在下面包含了一个简单的文本字段来演示这一点。还尝试将位置用作绝对位置，但没有用。

react-places-autocomplete 使用我用于地点建议的 google maps javascript API

没有地方建议下拉菜单

带有地方建议的图片按下下面的文本字段

Answer 1

您需要为自动完成容器提供绝对和 z-index 样式添加这个CSS -.autocomplete-dropdown-container{   position: "absolute";   z-index: 1000;}编辑：我使用的 css 有效-.location-search-input,.location-search-input:focus,.location-search-input:active {  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);  border: honeydew;  display: block;  width: 100%;  padding: 16px;  font-size: 16px;  border-radius: 2px;  outline: none;}.autocomplete-dropdown-container {  border-bottom: honeydew;  border-left: honeydew;  border-right: honeydew;  border-top: 1px solid #e6e6e6;  box-shadow: 0 2px 4px rgba(0,0,0,0.2);  position: absolute;  z-index: 1000;  border-radius: 0 0 2px 2px;}

Answer 2

您可以尝试将其绝对定位 - 如下所示：styles={{  listView:{    position: 'absolute',    backgroundColor: '#FFF',    zIndex: 10,//Forcing it to front  }}}

Answer 3

您需要设置绝对位置和 zIndexclassName="autocomplete-dropdown-container" styles={{   listView:{    position: 'absolute',    backgroundColor: 'white',    zIndex: 2,   } }}>