Question

我做了一首歌和一个歌词搜索页面。第一次搜索运行良好，但是当我单击搜索按钮时，先前的结果仍然保留，搜索结果也显示在页面上。

现在，我想在搜索另一首歌曲或歌词时消失结果。而且，我想使搜索结果具有相同的样式，但没有得到想要的结果。

template<typename Cont, typename = std::enable_if<std::is_integral_v<typename Cont::value_type>>>

const text = document.getElementById('text');
const search = document.getElementById('search');
const result = document.getElementById('result');
// api url
const api= 'https://api.lyrics.ovh';

// song lyrics

function getLyrics (artist, title) {
    let url = `${api}/v1/${artist}/${title}`
    fetch(url)
    .then(res => res.json())
    .then(singerLyrics => {
        const lyrics = singerLyrics.lyrics;
        const getLyric = document.getElementById('getLyric');
        getLyric.innerHTML = `<h2 class="text-success mb-4">${artist} - ${title}</h2>
        <pre class="lyric text-white">${lyrics}</pre>`;
    });
    result.innerHTML= '';
}

// search by song or artist

function searchSongs(term){
    fetch(`${api}/suggest/${term}`)
    .then(res => res.json())
    .then (showData);
};

// search result

function showData (data) {
    result.innerHTML = `<div class="single-result row align-items-center my-3 p-3">
    <div class="col-md-9"> ${data.data.map(song => `<h3 class="lyrics-name">${song.title}</h3>
        <p class="author lead">${song.type} by <span>${song.artist.name}</span></p>
    </div>
    <div class="col-md-3 text-md-right text-center">
        <button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button>
    </div>
</div>`)};
    `;

   
};

//event listeners

search.addEventListener('click', function searchResult (){
    const inputText =  text.value.trim();
    
    if (!inputText){
        alert('this is not a song or artist')
    }else {
        searchSongs(inputText);
    }
});

body{
    background-color: #13141b;
    color: #ffffff;
    background-image: url(images/bg-image.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}

.form-control{
    background-color:rgba(255, 255, 255, 0.2);
    padding: 22px;
    border: none;
    border-radius: 25px;
}
.btn{
    border-radius: 1.5rem;
    padding: 9px 20px;
}

.btn-privious{
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.navbar-toggler {
    border: none;
}
.search-box{
    position: relative;
}
.search-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.single-result{
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

Answer 1

尝试使用autocomplete =“ off”之类的

    <input type="text" name="foo" autocomplete="off" />

Answer 2

每次单击搜索时，都应显示歌词容器：

document.querySelector("#getLyric").childNodes.forEach(el => el.remove())

要解决此问题，请将其添加到脚本中：

document.querySelector("#search").addEventListener('click', function () {
    document.querySelector("#getLyric").innerHTML = '';
})

单击搜索按钮时如何清除搜索结果

2 个答案: