问题描述
获取API后，列表更新出现了一些问题。
每个新字母后，列表应更新并仅显示以键入字母开头的结果。
请帮助：）
这是我的JS代码：
var input = document.getElementById('input');
input.addEventListener('keyup',getJson);
function getJson() {
fetch('https://itunes.apple.com/search?term=indie&entity=song')
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
let result = '';
data.results.forEach(function (song) {
result += `<li>${song.artistName} - ${song.trackName}</li>`;
});
document.getElementById('result').innerHTML = result;
})
.catch(function (empty) {
console.log(empty);
});
}
这是HTML：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>Search songs</title>
</head>
<body>
<div id="app">
<h1>Enter artist name or song:</h1>
<input type="text" id="input">
<div class="loader"></div>
<br><br>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
解决方法
只需尝试一下。 这是您的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search songs</title>
</head>
<body>
<div id="app">
<h1>Enter artist name or song:</h1>
<input type="text" id="term" placeholder="term">
<input type="text" id="entity" placeholder="entity">
<div class="loader"></div>
<br><br>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
和javascript：
var term = document.getElementById('term');
var entity = document.getElementById('entity');
document.addEventListener('keyup',getJson);
function getJson() {
fetch('https://itunes.apple.com/search?term='+term.value+'&entity='+entity.value)
.then(function (response) {
return response.json();
})
.then(function (data) {
let result = '';
try{
data.results.forEach(function (song) {
console.log(song);
result += `<li>${song.artistName} - ${song.trackName}</li>`;
});
}
catch{}
document.getElementById('result').innerHTML = result;
})
.catch(function (empty) {
console.log(empty);
});
}
或者如果您想要某些元素的按键事件：
var term = document.getElementById('term');
var entity = document.getElementById('entity');
let termAndEntity = [term,entity];
termAndEntity.forEach(function(element){
element.addEventListener('keyup',getJson);
});
function getJson() {
fetch('https://itunes.apple.com/search?term='+term.value.toLowerCase()+'&entity='+entity.value.toLowerCase())
.then(function (response) {
return response.json();
})
.then(function (data) {
let result = '';
try{
data.results.forEach(function (song) {
console.log(song);
result += `<li>${song.artistName} - ${song.trackName}</li>`;
});
}
catch{}
document.getElementById('result').innerHTML = result;
})
.catch(function (empty) {
console.log(empty);
});
}