如何使下拉只显示用户开始输入时

时间：2017-02-23 01:59:01

标签： javascript html css dropdown

我试图创建一种在下拉菜单中使用过滤器列表的模拟搜索系统。我将它设置为当您单击输入栏并且过滤器列表有效时显示下拉列表的位置，但我尝试将其设置为只显示用户键入内容并保留下拉列表时的下拉列表输入为空时隐藏。有没有办法实现这个目标？

以下是代码：

＆＃13;
＆＃13; 
/* 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";

        }
    }
}
＆＃13; 
#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

将从searchDrop()调用onclick的事件属性更改为onkeypress，应在按键时将其打开

<input type="text" id="myInput" class="dropbtn" onkeypress="searchDrop()" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title">

添加一个条件searchDrop()如果它为空则不显示它将隐藏它直到输入某些东西

if(this.value != '') {
        document.getElementById("myDropdown").classList.toggle("show");
 }

以下完整的工作片段 

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function searchDrop() {
    if(this.value != '') {
        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" onkeypress="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>

答案 1 :(得分：0)

您可以将其添加到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>

相关问题
最新问题