Javascript 关于keyup的更新列表_Javascript_Api_Fetch Api_Onkeyup

Javascript 关于keyup的更新列表

javascript api

Javascript 关于keyup的更新列表,javascript,api,fetch-api,onkeyup,Javascript,Api,Fetch Api,Onkeyup,获取API后，我在列表更新方面遇到一些问题在每个新字母之后，列表应该更新，并且只显示以键入字母开头的结果请帮忙：）以下是我的JS代码： var input = document.getElementById('input'); input.addEventListener('keyup', getJson); function getJson() { fetch('https://itunes.apple.com/search?term=indie&entity=so

获取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);
        });
}

var input=document.getElementById（'input'）；
addEventListener（'keyup'，getJson）；
函数getJson（）{
取（'https://itunes.apple.com/search?term=indie&entity=song')
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
控制台日志（数据）；
让结果=“”；
data.results.forEach（函数（song）{
结果+=`${song.artistName}-${song.trackName}`；
});
document.getElementById（'result'）。innerHTML=result；
})
.catch（函数（空）{
console.log（空）；
});
}

以下是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'）；
document.addEventListener（'keyup'，getJson）；
函数getJson（）{
取（'https://itunes.apple.com/search?term='+term.value+'&entity='+entity.value）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
让结果=“”；
试一试{
data.results.forEach（函数（song）{
console.log（歌曲）；
结果+=`${song.artistName}-${song.trackName}`；
});
}
捕获{}
document.getElementById（'result'）。innerHTML=result；
})
.catch（函数（空）{
console.log（空）；
});
}

或者，如果要为某些元素设置关键帧事件：

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);
        });

var term=document.getElementById（'term'）；
var entity=document.getElementById（'entity'）；
设termAndEntity=[术语，实体]；
termAndEntity.forEach（函数（元素）{
元素addEventListener（'keyup'，getJson）；
});
函数getJson（）{
取（'https://itunes.apple.com/search?term=“+term.value.toLowerCase（）+”&实体=“+entity.value.toLowerCase（））
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
让结果=“”；
试一试{
data.results.forEach（函数（song）{
console.log（歌曲）；
结果+=`${song.artistName}-${song.trackName}`；
});
}
捕获{}
document.getElementById（'result'）。innerHTML=result；
})
.catch（函数（空）{
console.log（空）；
});

}

我不确定情况是否如此，但您应该知道，javascript不会仅仅因为您更改了它而呈现某些内容。有AnimationFrames，也许您应该使用

requestAnimationFrame（）

来更新html。更多关于

requestAnimationFrame（）

和事件循环的信息-谢谢，它成功了！：）你知道如果找不到任何信息，我如何显示信息吗？此外，当列表在每次键控后刷新时，我应该添加一些加载程序。