stackoom
  简体   繁体   中英

How to make it so the drop down only shows when user starts typing

 原文  2017-02-23 01:59:01  3   2    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) > -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>

2 answers

solution1
 0  2017-02-23 02:06:53

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">

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) > -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>

solution2
 0 ACCPTED  2017-02-23 02:11:00

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) > -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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make it so that a drop-down menu only shows at half or quarter window size? How to catch an event when the user starts typing? How can I make my discord bot only send a message if a user starts typing in a specific channel? Make highlighted input field 'unhighlighted' when user starts typing How to remove certain warning text from input value only when user starts typing in the input field? How to clear default value of form when the user starts typing (jquery) How to automatically open a popup input box when user starts typing Change css when user starts typing in input Show element when the user starts typing Mark when the user starts typing in a form
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM