Jump to content
Eli

A Problem to control the drop-down long menu using select size function

Recommended Posts

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>
  1. 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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×