Jump to content

Search the Community

Showing results for tags 'long-list'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. I am using a drop-down menu with a search option that excludes short-code search (based on my last post: How to ignore shortcode on html text search). Basically, it needs to look like this Country selection page: Now I have this very long drop-down menu that I would like to manage in a controlled window and I thought that using the select size function will work for me. Unfortunately, it didn't... Please see the following attached screenshots & codes that describe the problem. 1. This is the one that is working well but with a very long list (without the select size function): Working code but long list And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a> <a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a> <a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a> <a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a> <a href="/professional-network/asia/India">[flag=in] <span>India</span></a> <a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a> <a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a> <a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a> <a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a> <a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a> <a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a> <a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a> <a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a> <a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a> <a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a> <a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a> <a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a> <a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a> <a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a> <a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a> <a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a> <a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a> <a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a> <a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a> <a href="/professional-network/asia/China">[flag=cn] <span>China</span></a> <a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a> <a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a> <a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a> <a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a> <a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a> <a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a> <a href="/professional-network/asia/China">[flag=sg] <span>China</span></a> <a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a> <a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a> <a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a> <a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a> <a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a> <a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a> <a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a> <a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a> <a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a> <a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a> <a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> This is the one that is using the select size function but with bugs and not working (broke the search, the flags, the design and not opening properly on the website): The code problem And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <select size="20"> <option><a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <option><a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <option><a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <option><a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <option><a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <option><a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <option><a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <option><a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a></option> <option><a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a></option> <option><a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a></option> <option><a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a></option> <option><a href="/professional-network/asia/India">[flag=in] <span>India</span></a></option> <option><a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a></option> <option><a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a></option> <option><a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a></option> <option><a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a></option> <option><a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a></option> <option><a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a></option> <option><a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a></option> <option><a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a></option> <option><a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a></option> <option><a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a></option> <option><a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a></option> <option><a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a></option> <option><a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a></option> <option><a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a></option> <option><a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a></option> <option><a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a></option> <option><a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a></option> <option><a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a></option> <option><a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a></option> <option><a href="/professional-network/asia/China">[flag=cn] <span>China</span></a></option> <option><option><a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a></option> <option><a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a></option> <option><a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a></option> <option><a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a></option> <option><a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a></option> <option><a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a></option> <option><a href="/professional-network/asia/China">[flag=sg] <span>China</span></a></option> <option><a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a></option> <option><a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a></option> <option><a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a></option> <option><a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a></option> <option><a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a></option> <option><a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a></option> <option><a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a></option> <option><a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a></option> <option><a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a></option> <option><a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a></option> <option><a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> Obviously, I have done something wrong so if you can help me fix it I will appreciate this a lot!
×