如何解决键盘更新列表
获取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);
});
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
