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="请选择"/>
实现效果
文章来源：https://www.toymoban.com/news/detail-711483.html
文章来源地址https://www.toymoban.com/news/detail-711483.html
到了这里，关于原生js实现下拉框可输入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
