JS autocomplete

Stack OverFlow

by hunkyhari

HTML

<div id="main">
  <h2 align="center">Country Trivia</h2>
  <h3 align="center">Select a country below</h3>
  <table align="center">
    <tr>
      <td>Country:</td>
      <td>
        <select id="countries" onchange="javascript:displayDetails();">
          <option value="">Select--</option>
          <option value="Angola">Angola</option>
          <option value="Australia">Australia</option>
          <option value="Austria">Austria</option>
          <option value="Bahrain">Bahrain</option>
        </select>

      </td>
    </tr>

    <tr>
      <td>Capital:</td>
      <td>
        <input id="capital" disabled />
      </td>
    </tr>
    <tr>
      <td>Currency:</td>
      <td>
        <input id="Currency" disabled />
      </td>
    </tr>
    <tr>
      <td>Primary Language:</td>
      <td>
        <input id="Language" disabled />
      </td>
    </tr>
  </table>
</div>

CSS

#main‬ {
  margin: 0px auto;
  border: 2px solid black;
  width: 400px;
}

JavaScript

function displayDetails() {
  var country = [];
  var capital = [];
  var currency = [];
  var language = [];
  country[0] = "Angola";
  capital[0] = "Luanda";
  currency[0] = "Kwanza";
  language[0] = "Portuguese";
  country[1] = "Australia";
  capital[1] = "Canberra";
  currency[1] = "Australian Dollar";
  language[1] = "English";
  country[2] = "Austria";
  capital[2] = "Vienna";
  currency[2] = "Euro";
  language[2] = "German";
  country[3] = "Bahrain";
  capital[3] = "Manama";
  currency[3] = "Bahraini Dinar";
  language[3] = "Arabic";

  var choice = document.getElementById("countries").value;
  for (i = 0; i < country.length; i++) {
    if (country[i] == choice) {
      document.getElementById("capital").value = capital[i];
      document.getElementById("currency").value = currency[i];
      document.getElementById("language").value = language[i];
    } else {
      document.getElementById("capital").value = "";
      document.getElementById("currency").value = "";
      document.getElementById("language").value = "";
    }
  }

}