具有搜索功能的 CSS 下拉菜单 - 将搜索栏固定在顶部

Question

我正在尝试使此下拉菜单中的搜索框 (#myInput) 在用户滚动选择菜单时固定在顶部，类似于在 Excel 中“冻结”一行。

是否可以在不将搜索框与菜单选项完全分离的情况下使用 CSS 实现此功能？还是我必须查看其他选项以保持搜索框固定？

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">.dropbtn {
  background-color: #A41E34;
  color: white;
  padding: 16px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  background-color: #FFFFFF;
  min-width: 100%;
  font-size: 18px;
  padding: 14px 20px 12px 20px;
  border: none;
}

#myInput:focus {outline: 1px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 100%;
  max-height: 420px;
  overflow: auto;
  font-size: 18px;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 16px 20px;
  min-width: 100%;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<div class="dropdown"><button class="dropbtn" onclick="myFunction()">Select an Option</button>
    <div class="dropdown-content" id="myDropdown"><input id="myInput" onkeyup="filterFunction()" placeholder="Search..." type="text"> <a href="https://www.google.com">Option 1</a> <a href="https://www.google.com">Option 2</a> <a href="https://www.google.com">Option 3</a> <a href="https://www.google.com">Option 4</a> <a href="https://www.google.com">Option 5</a> <a href="https://www.google.com">Option 6</a> <a href="https://www.google.com">Option 7</a> <a href="https://www.google.com">Option 8</a> <a href="https://www.google.com">Choice 1</a> <a href="https://www.google.com">Choice 2</a> <a href="https://www.google.com">Choice 3</a> <a href="https://www.google.com">Choice 4</a></div>

Answer 1

要修改您的代码，我所做的只是在 CSS 中为 #myInput 元素添加两行代码。如果不移除上边距，滚动列表时会显示一些文本。我还根据文本大小 + 顶部和底部填充的值向第二个子元素添加了填充。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">.dropbtn {
  background-color: #A41E34;
  color: white;
  padding: 16px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  background-color: #FFFFFF;
  width: initial;
  font-size: 18px;
  padding: 14px 20px 12px 20px;
  border: none;
  position: sticky;
  display: block;
  top: 0;
  margin-top: 0;
}

#myInput:focus {outline: 1px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 100%;
  max-height: 420px;
  overflow: auto;
  font-size: 18px;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 16px 20px;
  min-width: 100%;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<div class="dropdown"><button class="dropbtn" onclick="myFunction()">Select an Option</button>
    <div class="dropdown-content" id="myDropdown"><input id="myInput" onkeyup="filterFunction()" placeholder="Search..." type="text"> <a href="https://www.google.com">Option 1</a> <a href="https://www.google.com">Option 2</a> <a href="https://www.google.com">Option 3</a> <a href="https://www.google.com">Option 4</a> <a href="https://www.google.com">Option 5</a> <a href="https://www.google.com">Option 6</a> <a href="https://www.google.com">Option 7</a> <a href="https://www.google.com">Option 8</a> <a href="https://www.google.com">Choice 1</a> <a href="https://www.google.com">Choice 2</a> <a href="https://www.google.com">Choice 3</a> <a href="https://www.google.com">Choice 4</a></div>

Answer 2

作为其他方式，您可以使用 Bootstrap-Select 插件。它拥有一切。 检查它here。