我正在尝试创建一种在下拉菜单中使用过滤器列表的模拟搜索系统。我将其设置为当您单击输入栏时下拉菜单出现的位置并且过滤器列表有效，但我正在尝试使其仅在用户键入内容时显示下拉菜单并在用户键入内容时将其隐藏输入为空。有办法实现吗？
代码如下:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function searchDrop() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function mySearch() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}#myInput[type=text] {
width: 130px;
box-sizing: border-box;
border-top: 2px solid rgba(0,0,0,0);
border-left: 2px solid rgba(0,0,0,0);
border-right: 2px solid rgba(0,0,0,0);
border-bottom: 3px solid #0d0d0d;
font-size: 16px;
font-weight: bold;
color: #999;
background-color: rgba(0,0,0,0);
background-image: url('Main/search.png');
background-position: 10px 12px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
text-align: left;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-family: 'gothic' !important;
}
#myInput[type=text]:focus {
width: 100%;
outline: none;
border-bottom: 3px solid #2E51A2;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 940px;
overflow: auto;
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;}
ul {
padding: 0;
list-style-type: none;
} <!DOCTYPE html>
<html>
<body>
<section class="mainSection">
<br>
<div class="dropdown">
<center><input type="text" id="myInput" class="dropbtn" onclick="searchDrop()" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"></center>
<div id="myDropdown" class="dropdown-content">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>最佳答案
您可以将此添加到 mySearch()，并通过检查 input.value 切换显示
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function mySearch() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
dropdown = document.getElementById("myDropdown");
if (input.value.trim() != '') {
dropdown.classList.add('show');
} else {
dropdown.classList.remove('show');
}
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}#myInput[type=text] {
width: 130px;
box-sizing: border-box;
border-top: 2px solid rgba(0, 0, 0, 0);
border-left: 2px solid rgba(0, 0, 0, 0);
border-right: 2px solid rgba(0, 0, 0, 0);
border-bottom: 3px solid #0d0d0d;
font-size: 16px;
font-weight: bold;
color: #999;
background-color: rgba(0, 0, 0, 0);
background-image: url('Main/search.png');
background-position: 10px 12px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
text-align: left;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-family: 'gothic' !important;
}
#myInput[type=text]:focus {
width: 100%;
outline: none;
border-bottom: 3px solid #2E51A2;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 940px;
overflow: auto;
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;
}
ul {
padding: 0;
list-style-type: none;
}<section class="mainSection">
<br>
<div class="dropdown">
<center><input type="text" id="myInput" class="dropbtn" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"></center>
<div id="myDropdown" class="dropdown-content">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
</div>
</div>
</section>关于javascript - 如何使下拉菜单仅在用户开始输入时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42405693/