HTML和CSS中帶有滾動視圖的下拉菜單

Question

我試圖用滾動視圖來做一個下拉菜單，但是我只是實現了向下滾動是水平的...而不是垂直的。

另外，我不知道如何從菜單中選擇一個選項后再保留該選項。例如，如果我選擇“波蘭”，則希望該選項為“ firs”並顯示“波蘭”。

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/`