亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 keyup 上更新列表

在 keyup 上更新列表

交互式愛情 2023-03-03 09:58:17
獲取 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 回答

?
慕少森

TA貢獻2019條經驗 獲得超9個贊

試試這個。這是你的 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);

        });

}


查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號