原生js实现下拉框可输入

js实现下拉框可输入

前言

众所周知，html默认的下拉框是无法输入值的，然后最新的办法是用datalist和输入框绑定，但是很多浏览器不支持。然后还有很多框架提供的下拉框都是可输入的。但是公司的项目太老了，考虑到依赖性需要使用原生js去实现。

业务是这样，现在有一个输入框存在，需要在不改变这个输入框id的情况下让这个输入框能实现下拉框的效果。

代码实现

Js代码

我编写了一个函数用于接收元素id和下拉框的列表数据，函数内部需要完成下拉框的创建。

首先获取需要变成下拉框的输入框id，然后创建ul元素，然后为ul元素添加css属性，css代码在文章结尾。通过循环去创建li元素，在循环的内部不仅要创建li元素，还要为每个li设置data-key自定义属性作为下拉框的key。还需要为每个下拉框创建点击事件，也就是选中下拉框某个内容时，将li的内容赋值给input框，然后隐藏下拉框因为已经完成了选中操作。

hideOtherDropdowns隐藏未使用的下拉框，当我有多个下拉框的时候，点击第一个下拉框，再点击第二个下拉框的时候要让之前的下拉框隐藏，防止多个下拉框同时展开。

然后还需要为input框添加点击事件，当我点击input框的时候显示下拉列表，还需要为每个document添加点击事件，我点击其他dom的时候下拉框要隐藏，比如其他输入框,页面空白处。

最后将ul元素添加到input元素后面，并设置为relative定位模式。

window.addEventListener("DOMContentLoaded", function() {
    var options = [
      { key: "1", value: "选项1" },
      { key: "2", value: "选项2" },
      { key: "3", value: "选项3" },
      { key: "4", value: "选项4" }
    ];
    renderDropdown("test", options);
    renderDropdown("test2", options);
});

function renderDropdown(id, options) {
  var input = document.getElementById(id);
  var dropdown = document.createElement("ul");

  dropdown.classList.add("dropdown-options");

  for (var i = 0; i < options.length; i++) {
    var option = document.createElement("li");
    option.textContent = options[i].value;
    option.setAttribute("data-key", options[i].key);
    option.addEventListener("click", function() {
          input.value = this.textContent; // 将选中的值赋给 input
          var selectedKey = this.getAttribute("data-key");
          console.log("Selected key:", selectedKey);
          dropdown.classList.remove("show");
          console.log(input.value)
    });
    dropdown.appendChild(option);
  }

  function hideOtherDropdowns()
  {
    var otherDropdowns = document.querySelectorAll(".dropdown-options");
    for (var j = 0; j < otherDropdowns.length; j++)
    { if (otherDropdowns[j] !== dropdown)
       {
        otherDropdowns[j].classList.remove("show");
      }
    }
  }
  input.addEventListener("click", function(e) {
    hideOtherDropdowns();
     //e.stopPropagation()的作用是阻止事件冒泡，使事件只在当前元素上触	发执行，不会继续传播到其他元素上。
    e.stopPropagation();
    dropdown.classList.toggle("show");
  });

  document.addEventListener("click", function() {
    dropdown.classList.remove("show");
  });

  input.insertAdjacentElement("afterend", dropdown);
  input.parentNode.style.position = "relative"; // 设置父元素的定位为相对定位
}

Css代码

.test {
  position: relative;
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #fff;
}
.dropdown-options {
  position: absolute;
  left: 0;
  width: auto;
  max-height: 200px;
  overflow-y: auto;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 999;
  display: none;
}
.show{
    display: block;
}
.dropdown-options li {
  padding: 10px;
  cursor: pointer;
}
.dropdown-options li:hover {
  background-color: #f2f2f2;
}

Html代码

<input id="test" type="text" class="test" placeholder="请选择"/>
<br/>
<input id="test2" type="text" class="test" placeholder="请选择"/>

实现效果