时间戳

首页 > 解决方案 > 如何使对象键的值成为用户在html中的输入搜索

javascript - 如何使对象键的值成为用户在html中的输入搜索

问题描述

我有这个项目正在进行，其中涉及从 api 获取数据。

我希望用户自己搜索国家/地区，而不是我手动从代码中更改它。我如何做到这一点。

这是来自 api 的原始 json 数据的一部分；

{
"Country": "Algeria",
"CountryCode": "DZ",
"Slug": "algeria",
"NewConfirmed": 89,
"TotalConfirmed": 2718,
"NewDeaths": 9,
"TotalDeaths": 384,
"NewRecovered": 52,
"TotalRecovered": 1099,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "American Samoa",
"CountryCode": "AS",
"Slug": "american-samoa",
"NewConfirmed": 0,
"TotalConfirmed": 0,
"NewDeaths": 0,
"TotalDeaths": 0,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Andorra",
"CountryCode": "AD",
"Slug": "andorra",
"NewConfirmed": 4,
"TotalConfirmed": 717,
"NewDeaths": 1,
"TotalDeaths": 37,
"NewRecovered": 13,
"TotalRecovered": 248,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Angola",
"CountryCode": "AO",
"Slug": "angola",
"NewConfirmed": 0,
"TotalConfirmed": 24,
"NewDeaths": 0,
"TotalDeaths": 2,
"NewRecovered": 0,
"TotalRecovered": 6,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Anguilla",
"CountryCode": "AI",
"Slug": "anguilla",
"NewConfirmed": 0,
"TotalConfirmed": 0,
"NewDeaths": 0,
"TotalDeaths": 0,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Antarctica",
"CountryCode": "AQ",
"Slug": "antarctica",
"NewConfirmed": 0,
"TotalConfirmed": 0,
"NewDeaths": 0,
"TotalDeaths": 0,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Antigua and Barbuda",
"CountryCode": "AG",
"Slug": "antigua-and-barbuda",
"NewConfirmed": 0,
"TotalConfirmed": 23,
"NewDeaths": 0,
"TotalDeaths": 3,
"NewRecovered": 0,
"TotalRecovered": 3,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Argentina",
"CountryCode": "AR",
"Slug": "argentina",
"NewConfirmed": 102,
"TotalConfirmed": 2941,
"NewDeaths": 4,
"TotalDeaths": 136,
"NewRecovered": 28,
"TotalRecovered": 737,
"Date": "2020-04-21T22:13:21Z"
},
{
"Country": "Armenia",
"CountryCode": "AM",
"Slug": "armenia",
"NewConfirmed": 48,
"TotalConfirmed": 1339,
"NewDeaths": 2,
"TotalDeaths": 22,
"NewRecovered": 35,
"TotalRecovered": 580,
"Date": "2020-04-21T22:13:21Z"

这是我的代码。

国家是蛞蝓，我想让它成为用户从 html 中的搜索表单中自己搜索的东西。

  })
    fetch('url')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        let country = data.Countries.filter((value) => value.Slug == 'nigeria')
       appendData(country);

    })
    .catch(function (err) {
        console.log(err);
    });      
    })

标签： javascriptnode.js

解决方案

您可以利用datalistHTML 元素

fetch('url')
	.then(response => response.json())
	.then(countries => {
		const options = countries.reduce((c, {Country}) => c += `<option value="${Country}">`, '');
		document.getElementById('country-list').innerHTML = options;
	});
<label for="country">Country: </label>
<input type="text" list="country-list" id="country">
<datalist id="country-list"></datalist>

推荐阅读