在 keyup 上更新列表
获取 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>
交互式爱情1回答
-
慕少森
试试这个。这是你的 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); });}或者如果你想要某些元素的 keyup 事件：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); });}
随时随地看视频慕课网APP
相关分类
JavaScript