猿问

在 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>


交互式爱情
浏览 109回答 1
1回答

慕少森

试试这个。这是你的 html：<!DOCTYPE html><html><head>&nbsp; <meta charset="utf-8">&nbsp; <title>Search songs</title></head><body>&nbsp; <div id="app">&nbsp; &nbsp; <h1>Enter artist name or song:</h1>&nbsp; &nbsp; <input type="text" id="term" placeholder="term">&nbsp; &nbsp; <input type="text" id="entity" placeholder="entity">&nbsp; &nbsp; <div class="loader"></div>&nbsp; &nbsp; <br><br>&nbsp; &nbsp; <div id="result"></div>&nbsp; </div>&nbsp; <script src="script.js"></script></body></html>和javascript：var term = document.getElementById('term');var entity = document.getElementById('entity');document.addEventListener('keyup', getJson);function getJson() {&nbsp; &nbsp; fetch('https://itunes.apple.com/search?term='+term.value+'&entity='+entity.value)&nbsp; &nbsp; &nbsp; &nbsp; .then(function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response.json();&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let result = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.results.forEach(function (song) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(song);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result += `<li>${song.artistName} - ${song.trackName}</li>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; catch{}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('result').innerHTML = result;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(function (empty) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(empty);&nbsp; &nbsp; &nbsp; &nbsp; });}或者如果你想要某些元素的 keyup 事件：var term = document.getElementById('term');var entity = document.getElementById('entity');let termAndEntity = [term, entity];termAndEntity.forEach(function(element){&nbsp; &nbsp; &nbsp; &nbsp; element.addEventListener('keyup', getJson);});function getJson() {&nbsp; &nbsp; fetch('https://itunes.apple.com/search?term='+term.value.toLowerCase()+'&entity='+entity.value.toLowerCase())&nbsp; &nbsp; &nbsp; &nbsp; .then(function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response.json();&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let result = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.results.forEach(function (song) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(song);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result += `<li>${song.artistName} - ${song.trackName}</li>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; catch{}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('result').innerHTML = result;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(function (empty) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(empty);&nbsp; &nbsp; &nbsp; &nbsp; });}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答