为带搜索栏的下拉菜单添加滚动条

Question

This is my HTML code这是我的 HTML 代码

                <div class="location-dropdown dropdown">
                    <button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site_network_status['sitename']}}</button>
                    <div id="myDropdown" class="dropdown-content">
                        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                        <div>
                            <a class="dropdown-item" href="link1">link1</a>
                            <a class="dropdown-item" href="link2">link2</a>
                        </div>
                    </div>
                </div>

And this is my js code used to show all the options and let user search.这是我的 js 代码，用于显示所有选项并让用户搜索。

function locations_dropdown() {
    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";
      }
    }
  }

this works fine.这很好用。 But I have way too many option links in the dropdown menu.但是我在下拉菜单中有太多选项链接。 So i want an option to be able to scroll through those options.所以我想要一个能够滚动浏览这些选项的选项。 i only want to be able to show around 10 options and scroll from that down.我只想显示大约 10 个选项并从中向下滚动。

Any help will be appreciated.任何帮助将不胜感激。

Update更新

this is the css file i am using.这是我正在使用的 css 文件。

.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
  }
  
  #myInput {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
  }
  
  #myInput:focus {outline: 3px solid #ddd;}
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}

Answer 1

add scrolable-container class and style it.添加 scrolable-container class 并设置样式。

 h1, h2 { font-family: Lato; }.dropbtn { background-color: #04aa6d; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus { outline: 3px solid #ddd; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #ddd; }.show { display: block; }.scrolable-container { overflow: auto; max-height: 420px; }

 <body> <div class="location-dropdown dropdown"> <button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site.network_status['sitename']}}</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <div class="scrolable-container"> <a class="dropdown-item" href="link1">link1</a> <a class="dropdown-item" href="link2">link2</a> <a class="dropdown-item" href="link2">link3</a> <a class="dropdown-item" href="link2">link4</a> <a class="dropdown-item" href="link2">link5</a> <a class="dropdown-item" href="link2">link6</a> <a class="dropdown-item" href="link2">link7</a> <a class="dropdown-item" href="link2">link8</a> <a class="dropdown-item" href="link2">link9</a> <a class="dropdown-item" href="link2">link10</a> <a class="dropdown-item" href="link2">link11</a> <a class="dropdown-item" href="link2">link12</a> <a class="dropdown-item" href="link2">link13</a> <a class="dropdown-item" href="link2">link14</a> <a class="dropdown-item" href="link2">link15</a> <a class="dropdown-item" href="link2">link16</a> </div> </div> </div> <script> function locations_dropdown() { 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"; } } } </script> </body>

为带搜索栏的下拉菜单添加滚动条

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-09 10:42:04

为带搜索栏的下拉菜单添加滚动条

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-09 10:42:04

解决方案1
1 已采纳 2023-01-09 10:42:04