反应自动完成下拉位置按下其他输入元素答案

【问题标题】：react autocomplete dropdown position pushing down other inputs elements反应自动完成下拉位置按下其他输入元素
【发布时间】：2021-01-24 12:40:00
【问题描述】：

我有自动完成下拉菜单，我关注了这个link。我在显示下拉项目方面遇到问题。

如链接所示，下拉项目显示在div 标记中，poistion 为relative

css

.autocomplete-wrapper {
  width: 300px;
  position: absolute;
  display:  inline-block;
}

.autocomplete-wrapper > div {
  width: 100%;
  z-index: 1;
}

.autocomplete-wrapper input {
  border: 1px solid #cecece;
  padding: 5px 5px;
  border-radius: 3px;
  font-size: 12px;
  width: 100%;
}

.autocomplete-wrapper input:focus {
  border-color: #0F67FF;
  box-shadow: none;
  outline: none;
}

.autocomplete-wrapper Autocomplete{
  position: absolute;
  z-index: -1;
}

.autocomplete-wrapper .dropdown {
  width: 100%;
  padding: 0;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #0F67FF;
  border-top: none;
  z-index: 2;
}

.autocomplete-wrapper .item  {
  display: block;
  cursor: pointer;
  font-size: 10px;
  padding: 10px;
}

.autocomplete-wrapper .item.selected-item {
  background-color: #0069ff;
  color: #FAFBFC;
}

.autocomplete-wrapper .item:hover {
  background-color: #0069ff;
  color: #FAFBFC;
}

我尝试将position 指定为absolute，但它与其他输入元素重叠。我希望下拉的位置不应该干扰其他输入元素，比如传统的反应选择下拉。

代码

       <div className="autocomplete-wrapper">
        <label htmlFor="title">Vehilce No</label>
        <Autocomplete 
          value={state.val}
          items={vehicles}
          getItemValue={item => item.numberPlate}
          shouldItemRender={renderVehicleNumber}
          renderMenu={item => (
            <div className="dropdown">
              {item}
            </div>
          )}
          renderItem={(item, isHighlighted) =>
            <div className={`item ${isHighlighted ? 'selected-item' : ''}`}>
              {item.numberPlate}
            </div>
          }
          onChange={(event, val) => setState({ val })}
          onSelect={val => setState({ val })}
        />
      </div>
    </div>
    <div className="form-group">
    <label htmlFor="price"> </label>
    <span>   </span>

    </div>
    <div className="form-group" style={{position: "static"}}> 
      <label htmlFor="price">Price</label>
      <input
        type="number"
        className="form-control"
        id="price"
        required
        value={creditEntry.price}
        onChange={handleInputChange}
        name="price"
      />
    </div>
    <div className="form-group">
      <label htmlFor="price">Litre</label>
      <input
        type="number"
        className="form-control"
        id="price"
        required
        value={creditEntry.litre}
        onChange={handleInputChange}
        name="price"
      />
    </div>

【问题讨论】：

你能发布更多代码吗？例如，自动完成周围的父元素是什么，以及自动完成干扰的元素。

标签： javascript html css reactjs autocomplete

【解决方案1】：

我已经添加了

z-index: 500;
position: fixed;

到包装样式.autocomplete-wrapper .dropdown {...。现在看起来像这样

.autocomplete-wrapper .dropdown {
  width: 100%;
  padding: 0;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #0F67FF;
  border-top: none;
  z-index: 500;
  position: fixed;
}

z-index: 500; 和 position: fixed; 都是让它工作的必要条件。

【讨论】：