如何在多个 HTML 文件之间使用输入/搜索？

Question

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.我正在尝试创建一个站点，您可以在其中搜索任何国家/地区，它会使用 REST 国家/地区 API 向您显示有关它的详细信息。 I want to have a first HTML page with just a search box in the middle where you type your country.我想要第一个 HTML 页面，中间只有一个搜索框，您可以在其中输入您的国家/地区。 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.然后，您按搜索，它会将您重定向到另一个 HTML 页面，我在该页面中为国家国旗、首都、人口、货币、地区和次地区设置了模板。

I have no clue how to connect them and I've tried messing with the input box id value, looking at search bar & REST Countries API tutorials, but I've figured out nothing.我不知道如何连接它们，我试过弄乱输入框 id 值，查看搜索栏和 REST 国家 API 教程，但我什么也没想出来。 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.我在页面上添加了一个搜索框，我只希望在其中显示信息以进行测试，如果我输入确切的国家/地区名称并且它区分大小写，它就可以工作。

How could I even connect these pages & search bar?我怎么能连接这些页面和搜索栏？ And if it is possible, how could I make it suggest me countries after I type in one letter?如果可能的话，我怎么能在我输入一个字母后让它建议我的国家？

Main HTML:主要 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/ae3cf15842.js" crossorigin="anonymous"></script>
    <title>CountryProjectA</title>
</head>
<body>
    <div>
            <div class="search-box" >
                <input class= "search-txt" type="text" id="search" placeholder="Search for a country" />
                <a class="search-btn" href="">
                    <i class="fas fa-search-location fa-lg"></i>
                </a>
            </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Country info display HTML:国家信息显示 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/info-style.css">
    <title>Info</title>
</head>
<body>
    <h1>Countries</h1>
    <div id="main-container">
        <div id="flag-container">
            <img src="" alt="">
        </div>
        <div id="info-container">
            <input name="" id="countries"></select>
            <p>Capital: <span id="capital"></span></p>
            <p>Population: <span id="population"></span></p>
            <p>Currencies: <span id="currencies"></span></p>
            <p>Region: <span id="region"></span></p>
            <p>Subregion: <span id="subregion"></span></p>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Main JS主要JS

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 => res.json())
.then(data => initialize(data))
.catch(err => console.log("Error:", err));

function initialize(countriesData) {
  countries = countriesData;
  let options = "";

  countries.forEach(country => options+=`<option value="${country.alpha3Code}">${country.name}</option>`);
  countriesList.innerHTML = options;
  countriesList.selectedIndex = Math.floor(Math.random()*countriesList.length);
  displayCountryInfo(countriesList[countriesList.selectedIndex].value);
}

function displayCountryInfo(countryByName) {
  const countryData = countries.find(country => 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 => c.name).map(c => `${c.name} (${c.code})`).join(", ");
  document.getElementById("region").innerHTML = countryData.region;
  document.getElementById("subregion").innerHTML = countryData.subregion;
}

Thank you!谢谢！

Answer 1

You should use this to get the input value in your Javascript code when someone clicks the search button.当有人单击搜索按钮时，您应该使用它来获取 Javascript 代码中的输入值。

document.getElementsByClassName("search-btn")[0].onclick = function() {
  var searchInput = document.getElementById("search").value;
  // call the search function here and redirect to the other page where you display results.
}

As for suggesting names, you can use the Google Places Autocomplete API for that: https://developers.google.com/places/web-service/autocomplete .至于建议名称，您可以使用 Google Places Autocomplete API： https://developers.google.com/places/web-service/autocomplete 。 Just call the API in the oninput event handler for #search .只需在 #search 的oninput事件处理程序中调用#search 。

Hope this helps!希望这可以帮助！

如何在多个 HTML 文件之间使用输入/搜索？

问题描述

1 个解决方案

解决方案1
0 2020-06-11 18:39:21

如何在多个 HTML 文件之间使用输入/搜索？

问题描述

1 个解决方案

解决方案1 0 2020-06-11 18:39:21

解决方案1
0 2020-06-11 18:39:21