javascript - 带有 HTML 和 CSS ScrollView 的下拉菜单

Question

我正在尝试做一个带有 ScrollView 的下拉菜单，但我只是实现了向下滚动是水平的...但不是垂直的。

我也不知道如何在从菜单中选择一个选项后保持该选项.. 例如，如果我选择波兰，我希望该选项优先并显示波兰。

HTML 代码。

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Country</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" 
onkeyup="filterFunction()">

<a href="#about">Albania <img src="themes/images/flags/Albania.png" 
width="25" height="6" alt=""/></a>

 <a href="#about">Andorra <img src="themes/images/flags/Andorra.png" 
width="25" height="6" alt=""/></a>

  <a href="#about">Argentina <img src="themes/images/flags/Argentina.png" 
width="25" height="6" alt=""/></a>

   <a href="#about">Austria <img src="themes/images/flags/Austria.png" 
width="25" height="6" alt=""/></a>

    <a href="#about">Poland <img src="themes/images/flags/Poland.png" 
width="25" height="6" alt=""/></a>

</div>

JAVA 脚本代码

<script>

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++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
    } else {
        a[i].style.display = "none";
    }
}
}
</script>

CSS 代码:

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

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

}

.dropdown-content {
display: none;

position: absolute;
background-color: #f9f9f9;
width: 160px;
overflow:scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

}

.dropdown a:hover {background-color: #f1f1f1}



.show {display:block;}

Answer 1

我认为您要进行的操作几乎不可能维护，因为您将更改每个键上 html 元素的顺序，这不是很好。一个更好的主意是将数据分隔在一个数组中并根据用户搜索显示。

我已经为你做了一个快速的jsfiddle，请看一看:

`var items = [
    { country: "Albania" , href: "#about" },
    { country: "Albannn1ia" , href: "#about" },
    { country: "Albdorra" , href: "#about" },
    { country: "Albrgentina" , href: "#about" },
    { country: "Austria" , href: "#about" },
    { country: "Portugal" , href: "#about" },
    { country: "Poland" , href: "#about" },
    { country: "Polonia" , href: "#about" }
];
var chosenItems = items;
https://jsfiddle.net/gugalondon/5cny3qxr/4/`