Title: How to make it so the drop down only shows when user starts typing
Tags: javascript;html;css;dropdown
Question: I'm trying to create a sort of mock search system that uses a filter list in a drop down menu. I have it set up to where the drop down appears when you click on the input bar and the filter list works, but I'm trying to make it so that it only shows the drop down when a user types something and keeps it hidden when the input is empty. Is there a way to achieve this?
Here's the Code:
/* 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) &gt; -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;}
padding: 0;
list-style-type: none;
<!DOCTYPE html&gt;
<html&gt;
<body&gt;
<section class="mainSection"&gt;
<br&gt;
<div class="dropdown"&gt;
<center&gt;<input type="text" id="myInput" class="dropbtn" onclick="searchDrop()" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"&gt;</center&gt;
<div id="myDropdown" class="dropdown-content"&gt;
<ul id="myUL"&gt;
<li&gt;<a href="#"&gt;Adele</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Agnes</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Billy</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Bob</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Calvin</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Christina</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Cindy</a&gt;</li&gt;
</ul&gt;
</div&gt;
</div&gt;
</section&gt;
</body&gt;
</html&gt;

Here is the accepted answer: You can add this to mySearch(), and toggle the display by checking 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) &gt; -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;
padding: 0;
list-style-type: none;
<section class="mainSection"&gt;
<br&gt;
<div class="dropdown"&gt;
<center&gt;<input type="text" id="myInput" class="dropbtn" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"&gt;</center&gt;
<div id="myDropdown" class="dropdown-content"&gt;
<ul id="myUL"&gt;
<li&gt;<a href="#"&gt;Adele</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Agnes</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Billy</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Bob</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Calvin</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Christina</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Cindy</a&gt;</li&gt;
</ul&gt;
</div&gt;
</div&gt;
</section&gt;

Here is another answer: Changing your event attribute that calls searchDrop() from onclick to onkeypress should open it on key press instead
<input type="text" id="myInput" class="dropbtn" onkeypress="searchDrop()" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"&gt;
Adding a conditional to searchDrop() to not display if it's empty will achieve hiding it until something is typed
if(this.value != '') {
document.getElementById("myDropdown").classList.toggle("show");
Full working snippet below
/* 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) &gt; -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;}
padding: 0;
list-style-type: none;
<!DOCTYPE html&gt;
<html&gt;
<body&gt;
<section class="mainSection"&gt;
<br&gt;
<div class="dropdown"&gt;
<center&gt;<input type="text" id="myInput" class="dropbtn" onkeypress="searchDrop()" onkeyup="mySearch()" placeholder="Search..." title="Type Series Title"&gt;</center&gt;
<div id="myDropdown" class="dropdown-content"&gt;
<ul id="myUL"&gt;
<li&gt;<a href="#"&gt;Adele</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Agnes</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Billy</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Bob</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Calvin</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Christina</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Cindy</a&gt;</li&gt;
</ul&gt;
</div&gt;
</div&gt;
</section&gt;
</body&gt;
</html&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:02/23/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><css><dropdown>', 'Title': 'How to make it so the drop down only shows when user starts typing', 'ViewCount': 596, 'id': 42405693, 'user_AboutMe': None, 'user_AccountId': 9824269.0, 'user_DisplayName': 'Kimura', 'user_Reputation': 17.0, 'user_Views': 15.0, 'user_id': 7277839.0}}