如何使对象属性的值可从输入标签中搜索

Question

我有这个我正在使用的api，我想让国家（即value.slug == china）成为用户的搜索项，因为我在代码中手动输入它们以获得每个国家的结果。我希望能够将 api 与我的 html 表单输入标签连接起来，以便用户自己搜索国家/地区。这是代码fetch('https://api.covid19api.com/summary')        .then(function (response) {            return response.json();        })        .then(function (data) {            let country = data.Countries.filter((value) => value.Slug == 'china')            appendData(country);        })        .catch(function (err) {            console.log(err);        });

Answer 1

使用纯 javascript，您可以执行以下操作：

var input = document.querySelector("#input")

input.addEventListener("change", function(event) { // enter key triggers event

   var value = event.target.value;

   console.log(value);

   getData(value);

});

function appendData(data) {

  // stub

  console.log(data);

}

function getData(country) {

fetch('https://api.covid19api.com/summary')

        .then(function (response) {

            return response.json();

        })

        .then(function (data) {

            let country = data.Countries.filter((value) => value.Slug == country)

            appendData(country);

        })

        .catch(function (err) {

            console.log(err);

        });

}

<input type="text" id="input" />