title: How can I use input/search between multiple HTML files?
body: <p>I'm trying to create a site where you can search up any country and it'll show you detailed information on it using REST Countries API. I want to have a first HTML page with just a search box in the middle where you type your country. You then press search and it'll redirect you to another HTML page where I've set up a template for the countries flag, capital, population, currency, region, and subregion. </p>
  
  <p>I have no clue how to connect them and I've tried messing with the input box id value, looking at search bar &amp; REST Countries API tutorials, but I've figured out nothing. I added a search box to the page where I want ONLY the information to be displayed for testing and it works if I type in the exact country name and it is case sensitive.</p>
  
  <p>How could I even connect these pages &amp; search bar? And if it is possible, how could I make it suggest me countries after I type in one letter?</p>
  
  <p>Main HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&amp;display=swap" rel="stylesheet"&gt; 
      &lt;script src="https://kit.fontawesome.com/ae3cf15842.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;title&gt;CountryProjectA&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
              &lt;div class="search-box" &gt;
                  &lt;input class= "search-txt" type="text" id="search" placeholder="Search for a country" /&gt;
                  &lt;a class="search-btn" href=""&gt;
                      &lt;i class="fas fa-search-location fa-lg"&gt;&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Country info display HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="css/info-style.css"&gt;
      &lt;title&gt;Info&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Countries&lt;/h1&gt;
      &lt;div id="main-container"&gt;
          &lt;div id="flag-container"&gt;
              &lt;img src="" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="info-container"&gt;
              &lt;input name="" id="countries"&gt;&lt;/select&gt;
              &lt;p&gt;Capital: &lt;span id="capital"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;Population: &lt;span id="population"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;Currencies: &lt;span id="currencies"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;Region: &lt;span id="region"&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;Subregion: &lt;span id="subregion"&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Main JS</p>
  
  <pre><code>const countriesList = document.getElementById("countries");
  let countries;
  
  countriesList.addEventListener("change", newCountrySelection);
  
  function newCountrySelection(event) {
    displayCountryInfo(event.target.value);
  }
  
  fetch("https://restcountries.eu/rest/v2/all")
  .then(res =&gt; res.json())
  .then(data =&gt; initialize(data))
  .catch(err =&gt; console.log("Error:", err));
  
  function initialize(countriesData) {
    countries = countriesData;
    let options = "";
  
    countries.forEach(country =&gt; options+=`&lt;option value="${country.alpha3Code}"&gt;${country.name}&lt;/option&gt;`);
    countriesList.innerHTML = options;
    countriesList.selectedIndex = Math.floor(Math.random()*countriesList.length);
    displayCountryInfo(countriesList[countriesList.selectedIndex].value);
  }
  
  function displayCountryInfo(countryByName) {
    const countryData = countries.find(country =&gt; country.name === countryByName);
    document.querySelector("#flag-container img").src = countryData.flag;
    document.querySelector("#flag-container img").alt = `Flag of ${countryData.name}`;  
    document.getElementById("capital").innerHTML = countryData.capital;
    document.getElementById("population").innerHTML = countryData.population.toLocaleString("en-US");
    document.getElementById("currencies").innerHTML = countryData.currencies.filter(c =&gt; c.name).map(c =&gt; `${c.name} (${c.code})`).join(", ");
    document.getElementById("region").innerHTML = countryData.region;
    document.getElementById("subregion").innerHTML = countryData.subregion;
  }
  </code></pre>
  
  <p>Thank you!</p>