英文:
Add a scroll bar for dropdown menu with search bar
问题
这是我的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>
这是用于显示所有选项并允许用户搜索的JavaScript代码：
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";
}
}
}
这段代码可以正常工作。但是在下拉菜单中有太多选项链接。所以我想要一个选项，可以滚动查看这些选项。我只想显示大约10个选项，然后从中滚动。
任何帮助将不胜感激。
更新
这是我正在使用的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;}
英文:
This is my HTML code
<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.
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.
Any help will be appreciated.
Update
this is the css file i am using.
.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;}
答案1
得分: 2
添加可滚动容器类并进行样式设置。
.scrolable-container {
overflow: auto;
max-height: 420px;
}
在HTML代码中，将这个类应用于需要可滚动容器的元素。
英文:
add scrolable-container class and style it.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论