时间戳

首页 > 解决方案 > 如何在多个 HTML 文件之间使用输入/搜索？

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

问题描述

我正在尝试创建一个站点，您可以在其中搜索任何国家/地区，它会使用 REST 国家 API 向您显示有关它的详细信息。我希望有一个第一个 HTML 页面，中间只有一个搜索框，您可以在其中输入您的国家/地区。然后，您按下搜索，它会将您重定向到另一个 HTML 页面，在该页面中我为国家国旗、首都、人口、货币、地区和次地区设置了模板。

我不知道如何连接它们，我尝试过弄乱输入框 id 值，查看搜索栏和 REST 国家 API 教程，但我什么也没弄清楚。我在页面上添加了一个搜索框，我只希望显示信息以进行测试，如果我输入确切的国家名称并且它区分大小写，它就会起作用。

我怎么能连接这些页面和搜索栏？如果可能的话，我怎么能在我输入一个字母后让它建议我的国家？

主要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>

国家信息显示 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>

主要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;
}

谢谢！

标签： javascripthtmljquery

解决方案

当有人单击搜索按钮时，您应该使用它来获取 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.
}

至于建议名称，您可以使用 Google Places Autocomplete API：https ://developers.google.com/places/web-service/autocomplete 。只需在oninput事件处理程序中调用 API 即可#search。

希望这可以帮助！

推荐阅读