title: Implementing a AutoComplete dropdown in plain JavaScript
body: <p>Here is my HTML</p>
  
  <pre><code>&lt;h2&gt;Please Enter the Value in the Box(click on the desired value)&lt;/h2&gt;
  &lt;input id='value' type="text" autocomplete="on" placeholder="country" /&gt;
  &lt;div id="dropdown"&gt;
      &lt;select name="list" id="list"&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JavaScript</p>
  
  <pre><code>var arr = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp;amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp;amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp;amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp;amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp;amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp;amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
  var input = document.getElementById('value');
  var optionsVal = document.getElementById('list');
  
  input.addEventListener('keyup', show);
  optionsVal.onclick = function(){
      setVal(this);
  };
  
  //shows the list
  function show(){
      var dropdown = document.getElementById('dropdown');
      dropdown.style.display = 'none';
  
      optionsVal.options.length = 0;
  
      if(input.value){
          dropdown.style.display = 'block';
          optionsVal.size = 3;
          var textCountry = input.value;
  
          for(var i = 0; i &lt; arr.length; i++){
              if(arr[i].indexOf(textCountry) !== -1){
                  //addvalue
                  addValue(arr[i],arr[i]);
  
              }
          }
  
      }
  }
  
  function addValue(text,val){
      var createOptions = document.createElement('option');
      optionsVal.appendChild(createOptions);
      createOptions.text = text;
      createOptions.value = val;
  }
  
  //Settin the value in the box by firing the click event
  function setVal(selectedVal){
      input.value = selectedVal.value;
      document.getElementById('dropdown').style.display='none';
  }
  </code></pre>
  
  <p>This issue i am running into is the logic involved when checking for the input value and showing the values in the dropdown. For example if i type in 'u' only countries 'Anguilla, Antigua' show up instead of any country with 'u' in it. I know the issue lies where i am checking for indexOf, but i am stuck here. </p>
  
  <p>Also how can i keep the dropdown size dynamic to the values found? Your feedback would be great in improving the overall problem too</p>