Jump to content

Eli

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by Eli

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

×
×
  • Create New...