时间戳

首页 > 解决方案 > 反应自动完成下拉位置按下其他输入元素

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

问题描述

我有自动完成下拉菜单，我已经关注了这个链接。我在显示下拉项目方面面临问题。

正如我在链接中所示，下拉项目显示在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;
}

我尝试给出positionasabsolute但它与其他输入元素重叠。我希望下拉的位置不应该干扰其他输入元素，比如传统的反应选择下拉。

代码

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

下拉位置问题。

标签： javascripthtmlcssreactjsautocomplete

解决方案

我已经添加

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;

推荐阅读