keyup 更新列表答案

【问题标题】：Update list on keyupkeyup 更新列表
【发布时间】：2020-09-14 08:27:46
【问题描述】：

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

【问题讨论】：

我不确定是否是这种情况，但您应该知道，javascript 不会仅仅因为您更改了它而呈现某些内容。有 AnimationFrames，也许你应该使用 requestAnimationFrame() 来更新你的 html。更多关于 requestAnimationFrame() 和事件循环 - youtu.be/cCOL7MC4Pl0

标签： javascript api fetch-api onkeyup

【解决方案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);
        });

}

【讨论】：

谢谢，成功了！ :) 你知道如果什么也没找到，我该如何显示消息？另外，我应该在每次按键后刷新列表时添加某种加载器。